Elixir de Laravel no és res més que un elegant wrapper de Gulp que ens facilita la creació del front-end de la nostra aplicació.
El que proporciona Elixir és una forma organitzada de gestionar els assets (p.ex. fitxers javascript, css, fonts, etc) utilitzant eines ja existents com sass, less,Bower, Coffescript...
El primer que cal tenir en compte és la estructura de fitxers i carpetes per treballar amb elixir:
Precisament una de les tasques que farà Laravel Elixir amb el suport de Gulp és automatitzar la tasca de copiar els fitxers de la carpeta resources a la carpeta public però a més realitzant tasques extres coma la minificació de fitxers, la concatenació,etc. De fet Elixir/Gulp és una eina d'automatització de tasques.
Abans de començar a utilitzar Laravel Elixir comproveu que teniu node.js instal·lat:
$ node -v
El primer que cal fer abans d'utilitzar [[Gulp és instal·lar-lo globalment:
$ sudo npm install --global gulp
I ara a un projecte Laravel acabant d'instal·lar instal·lem les dependències npm:
$ npm install
Que instal·larà segons:
$ cat package.json { "private": true, "devDependencies": { "gulp": "^3.8.8", "laravel-elixir": "*" } }
Gulp i el propi laravel-elixir a la carpeta node_modules. Ara ja podem utilitzar Laravel Elixir executant:
$ gulp [13:48:04] Using gulpfile ~/github/laracast-laravel-frontend-series/gulpfile.js [13:48:04] Starting 'default'... [13:48:04] Starting 'less'... [13:48:04] Finished 'default' after 420 ms [13:48:06] gulp-notify: [Laravel Elixir] [13:48:06] Finished 'less' after 2.45 s
Que executa bàsicament l'especificat a:
Acacha Wiki$ cat gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Less
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.less('app.less');
});
Que fa per defecte? Doncs utilitzar less per llegir els recursos trobats a:
resources/assets/less
I crear el fitxers:
public/css/app.css public/css/app.css.map
NOTA: Els css.map permeten a navegador i concretament a les eines de depuració de navegadors accedir a fitxer de css o javascript sense minificar i/o normalitzar desde fitxers minificats per tal de facilitar la depuració
Per tant el que fa Gulp és automatitzar la "instal·lació" dels assets. Per no tenir que estar continuament executant gulp cada cop que canviem algun asset podeu executar:
$ gulp watch
I cada cop que canvieu un recurs o asset s'executarà gulp ell sol.
Cal també tenir en compte que ja està automatitzat pensat el procés de passar a explotació/producció els assets només cal executar:
$ gulp --production
Aquesta comanda només s'executarà al servidor d'explotació per que el que fa és minimitzar el fitxer app.css cosa que no és gaire útil durant el desenvolupament però que és crític per a millorar la plataforma d'execució/explotació. Per tornar endarrera (tornar d'explotació a desenvolupament):
$ gulp
Recursos:
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
var npmDir = 'node_modules/',
jsDir = 'resources/assets/js/';
mix.copy(npmDir + 'vue/dist/vue.min.js', jsDir);
mix.copy(npmDir + 'vue-resource/dist/vue-resource.min.js', jsDir);
mix.scripts([
'vue.min.js',
'vue-resource.min.js'
], 'public/js/vendor.js');
});
var elixir = require('laravel-elixir');
var path = require('path');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.less('app.less')
.webpack('app.js', null, null, {
resolve: {
modules: [
path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js'),
'node_modules'
]
}
})
.copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
.copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css');
});
I així per exemple podem carregar un component vue.js amb:
var base = require('auth/register-stripe');
Vue.component('spark-register-stripe', {
mixins: [base]
});