IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

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:

  • Carpeta resources/assets: en aquesta carpeta es troben els recursos/assets de la nostra aplicació organitzats per eines. Per exemple l'Scaffolding que porta per defecte Laravel 5 inclou una carpeta resources/assets/less/app.less amb configuració bàsica de boostrap less.
  • Carpeta public: recordeu que aquesta és la única carpeta d'un projecte Laravel que és publica al servidor web. També l'Scaffolding que porta per defecte laravel 5 crea precisament amb Elixir una carpeta css/app.css amb el css de l'aplicació d'inici de Laravel 5. Recordeu que l'ordre $ php artisan fresh elimina tots aquests fitxer per tal de tenir un projecte Laravel 5 des de zero amb la nostra pròpia organització.

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.


Instal·lació

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:

$ 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:

Examples

Compbinar amb npm/node_modules folder

/*
 |--------------------------------------------------------------------------
 | 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');

});

Webpack

= Utilitzant altres carpetes a més de node_modules com a origin de codi javascript (require)

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]
});

Vegeu també

Enllaços externs