Laravel Mix ja versio 5.2 Laravel versio 5.2 hyödyntää Gulp –työkalua selainresurssien käsittelyssä (SASS ja SCSS käännetään CSS:ksi, ES6 käännetään ES5:ksi). Jos halutaan ottaa käyttöön version 5.4 mukana tuoma Webpack –pohjainen käännöstyökalu Mix, täytyy se vaihtaa projektin riippuvuuksiin. Tavoitteena on siis käyttää Webpack:a. Se on Node –moduuli, joten se ei varsinaisesti liity mitenkään Laravel –ohjelmistokehykseen. Gulpin vaihtaminen Webpackiin pitäisi siis olla varsin helppo operaatio. Käyn tässä läpi tavan, jolla sen itse tein. Mahdollisesti helpompiakin tapoja saattaa olla, eli joku on kenties jo luonut paketin, jossa tämä on tehty valmiiksi. Mutta harjoituksen kannalta hyvä käydä läpi askel askeleelta, jos joskus tulee vastaan vastaavia tarpeita. NPM on Node:n asennustyökalu. Sitä ohjataan packages.json –tiedostolla. Asennan aluksi Laravel 5.2:n seuraavasti: composer create-project --prefer-dist laravel/laravel test52 "5.2.*" Tämä lataa lähdekoodit kansioon test52. Siellä pitäisi nyt olla packages.json, mutta tuossa tiedostossa viitataan nyt Gulp –työkaluun. Vaihdetaan tiedoston sisältö uuden version riippuvuuksilla: { "private": true, "scripts": { "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.15.3", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "^0.8.1", "lodash": "^4.17.4", "vue": "^2.1.10" } }

Tämän pitäisi riittää, mutta huomasin, että cross-env kirjasto ei asentunut suoraan oikein joten lisätään se vielä erikseen:

npm install --save-dev cross-env

Nyt kaikkien riippuvuuksien pitäisi olla määritettynä, joten voidaan suorittaa niiden lataaminen:

npm install

Nyt kaikkien riippuvuuksien pitäisi olla asennettuna. Tarvitaan enää ohjeet siitä, mitä tiedostoja halutaan kääntää ja miten. Lisään projektin juureen webpack.mix.js –tiedoston näiden määrittämiseen ja lisään sinne samat ohjeet, joita luennolla käsiteltiin: const { mix } = require('laravel-mix'); mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css'); Tämä kääntäisi JS:n ja SCSS:n olettaen yllä mainittujen tiedostojen olevan niiden aloituspisteet. Eli jos app.js vaatii muita tiedostoja require():lla, ne haetaan myös lopulliseen käännettyyn tiedostoon mukaan. Lisätään vielä vastaava hakemisto resources/assets/js ja lisätään sinne app.js ja sinne jotain koodia. Kun nyt ajetaan npm run [dev|watch|production] (jokin noista), saadaan lopullinen, käännetty tiedosto public/ -hakemistoon. Nyt käytössä on Mix.

Valmistelut luennolla esitettyjen komponenttien käyttämiselle Resources/assets/js/app.js: require('./bootstrap'); const app = new Vue({ el: '#app' }); Resources/assets/js/bootstrap.js: require('bootstrap-sass'); window.Vue = require('vue'); window.axios = require('axios'); window.axios.defaults.headers.common = { 'X-CSRF-TOKEN': window.Laravel.csrfToken, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' };

Muuta huomattavaa Resources/assets/js/bootstrap.js –tiedostossa määritetään, että kaikissa Axios –kutsuissa on mukana CSRF –token. Tämä luetaan yllä objektista window.Laravel.csrfToken. Sellainen täytyy siis lisätä sivulle saataviksi. Koska tämä tieto tulee palvelimelta, se voidaan kirjoittaa palautettavaan sivuun ja JavaScript voi sen sieltä lukea. Tieto voisi olla meta-tagissa, mutta helpoin tapa on kirjoittaa se script –elementin sisään:

<script> window.Laravel = {!! json_encode([ 'csrfToken' => csrf_token(), ]) !!}; </script> Tämä voidaan siis lisätä master –templateen ennen muita script –tageja. Vielä viimeisenä huomionarvoisena asiana on se, että app.js –tiedostossa alustetaan Vue –kirjasto tarkkailemaan elementtiä sivulla. Tämä rajaa kirjaston toiminnan vain haluttuun DOM-puun solmuun. Tässä tapauksessa on määritetty, että kirjasto toimii sellaisen elementin sisällä, jonka id on ’app’. Jos halutaan poistaa rajaus, voidaan myös määrittää el: ’body’, jolloin kirjasto tarkkailee koko DOM-puuta, mutta tällöin menetetään rajatun DOM-puun tarjoama tehokkuushyöty. const app = new Vue({ el: '#app' });

Lopuksi Kun packages.json on päivitetty ja asennettu ja webpack.mix.js –tiedosto on lisätty, voidaan suoraa kopioida luennon koodeja versiohallinnasta JavaScriptin osalta. Eli kaikki versiohallinnan resources/assets/js –hakemistossa olevat tiedot pitäisi nyt voida kääntää suoraan myös versiolla 5.2.