Laravel Elixir no es un desarrollo con PHP, sino un desarrollo NodeJS. No está pensado para la parte backend, como Laravel en general, sino para la parte frontend. Por todo eso puede parecer un poco raro que un framework PHP incluya algo como Elixir, aunque la verdad es que sirve de mucho y se agradece que esté disponible, porque nos va a ahorrar mucho tiempo de configuraciones en nuestro proyecto.

Elixir se usa durante la etapa de desarrollo, facilitando la tarea de preprocesamiento entre lenguajes como Sass o Less y CSS, o entre Coffee Script y Javascript. También la parte de la transpilación de un hipotético proyecto realizado con ES6. Para todo ello se apoya en un gestor de tareas popular, como es Gulp. En la etapa de despliegue nos permite asimismo optimizar los archivos de la aplicación, compactando CSS o Javascript.

El resultado de ello es mayores prestaciones a lo largo del desarrollo y un sitio más optimizado una vez publicado. Son las mismas ventajas que obtendríamos si usamos Gulp directamente. Si ya estamos acostumbrados a usar Gulp o Grunt en nuestros proyectos podemos prescindir de Elixir, que es simplemente una capa por encima.

Si tenemos un dominio del tooling de NodeJS podríamos personalizar nuestras tareas y adaptarlas a otra serie de necesidades diferentes, pero lo cierto es que hay mucho trabajo realizado detrás de Elixir y muchas configuraciones que seguramente nos vengan bien. Sobre todo Elixir ya está listo para realizar muchas cosas y configurado para adaptarse a una estructura de carpetas definida, la estructura del framework Laravel.

Los desarrolladores de Laravel seguramente disfruten de Elixir y les permita centrarse en la parte que mejor dominan, el desarrollo Backend, sin necesidad de perder prestaciones habituales entre los mejores frontend. Un desarrollador PHP es habitual que tenga dudas con la configuración de la parte frontend de un proyecto y para él será especialmente útil Elixir.

Instalación de Elixir

En un proyecto recién instalado de Laravel todavía no se encuentra disponible Elixir. Hay que instalarlo aparte, aunque es una tarea que se resume en un sencillo comando. El único detalle es que necesitamos tener disponible NodeJS.

Si hemos instalado Laravel en una máquina Homestead, ya tendremos NodeJS configurado. Si lo hemos instalado en otro ordenador quizás tengamos Node ya disponible. Si no es así, tendrás que instalarlo con el proceso habitual para tu sistema operativo. En general podemos saber si tenemos NodeJS instalado con el comando:

node -v

Como segundo paso instalaremos Gulp, que es un programa realizado con NodeJS que es un automatizador de tareas, sobre el que está construido Elixir. Lo haces con el siguiente comando.

npm install --global gulp

Una vez sabemos que está Node y Gulp en nuestro sistema hay que instalar Elixir y todas sus dependencias. Esto es algo sencillo gracias a npm, que es el gestor de paquetes de Node, igual que Composer es el gestor de paquetes para PHP.

En resumen, npm tiene un archivo de configuración de las dependencias de un proyecto, que se llama package.json. Para instalar todas las dependencias definidas en ese archivo ejecutamos un comando, desde el directorio raíz de tu proyecto Laravel.

npm install

Configurar Elixir

Dependiendo de las tareas que queramos realizar en la parte frontend, nuestras herramientas habituales y el grado de optimización que busquemos, tendremos que configurar Elixir de una manera u otra.

Esta parte ya es más dependiente del propio NodeJS que de PHP, así que la realizaremos con Javascript. No obstante, es muy sencillo como verás a continuación, por lo que si no sabes Javascript o Node no tienes por qué asustarte.

Cada cosa que queramos hacer, de entre las que nos ofrece Elixir, tenemos que definirla en el archivo gulpfile.js, que tienes en la carpeta raíz de tu proyecto.

Elixir nos abstrae de toda la complejidad de crear tareas para Gulp. Ahora ya depende de nuestras tareas el código que debemos crear. Encontramos, entre las posibilidades de Elixir, las siguientes tareas:

Preprocesado de archivos Less o Sass
Preprocesado de archivos Coffee Script
Compactado de CSS o Javascript
Unificación de varios archivos CSS o Javascript en un único archivo, para reducir las solicitudes http al servidor.
Copiar archivos "assets" a nuestra carpeta de proyecto public.
Transpilación de ES6 con Babel o Browserify
Sincronización del navegador, con live reload cuando cambian archivos de la aplicación

La configuración de todas estas cosas es muy sencilla, porque realmente Elixir nos hace todo el trabajo pesado. Simplemente hay que declarar cuáles de estas cosas necesitamos hacer. Vamos a ver un par de ejemplos.

Preprocesado de archivos Sass
Esta opción es interesante de comentar porque ya está configurada en gulpfile.js y la podemos tomar de referencia.

Si abres ese archivo "gulpfile.js" verás el siguiente código:

elixir(function(mix) {
    mix.sass('app.scss');
});

Eso es lo único que necesitamos hacer para configurar una tarea Gulp aprovechando la capa que Elixir nos pone por encima.

Cuando se ejecute esta tarea Elixit irá a la carpeta resources/assets/sass y dentro de ella tomará el archivo app.scss y lo procesará, convirtiendo el código Sass en CSS. El archivo CSS resultante lo colocará en public, en la carpeta public/css. Es en esa carpeta donde tenemos que enlazar el CSS para generar los estilos de nuestro proyecto.

Unión de varios archivos Javascript
Si estamos usando en nuestra aplicación varios archivos Javascript distintos, con librerías y plugins diversos, podemos unirlos en un solo archivo gracias a Elixir.

La tarea se escribe más o menos así:

elixir(function(mix) {
    mix.scripts([
        'app.js',
        'prism.js'
    ]);
});

Esto irá a buscar los archivos en resources/assets/js. Tomará los archivos Javascript "app.js" y "prism.js". Los unirá en un único fichero llamado all.js que colocará en la ruta public/js.

En nuestro HTML, en lugar de incluir todos los scripts por separado, enlazaremos con ese único fichero de código Javascript.

Explicaremos otros procesos más adelante. De todos modos, los tienes documentados en la página de Elixir y generalmente es todo muy parecido a lo que has visto. Además es posible tener tareas Gulp, creadas sin Elixir, y ejecutarlas igualmente.

Ejecutar Elixir

Tenemos un par de mecanismos para ejecutar las tareas de gulp configuradas en el proyecto Laravel.

1. Ejecutar explícitamente las tareas programadas en gulpfile
2. Mantener abierto un "watcher" que ejecutará las tareas automáticamente cuando detecte que se deben ejecutar, dado que hayan cambiado los archivos fuente

1) Ejecutamos Elixir de manera explícita con el comando:

gulp

Eso ejecutará todas las tareas de gulpfile.js y producirá el resultado. Pero si lo deseas, puedes alterar este comando indicando que también se compacten los archivos resultantes.

gulp --production

Esto generará los mismos archivos pero con el código compactado, sin comentarios, etc.

2) Mantenemos un watcher Gulp activo con el comando:

gulp watch

Esto estará escuchando cualquier cambio en los assets para procesar las tareas cuando es necesario, sin que tengamos que estar todo el tiempo pidiéndolo explícitamente a Gulp. Los resultados son los mismos, solo que el watcher no nos permite indicar que se desea compactar el resultado, algo que no es problema porque el watcher lo usarás solo para la etapa de desarrollo.

Conclusión

De momento es todo. Con esto tendrás un flujo de trabajo ágil para gestión de los componentes frontend de tus aplicaciones Laravel. Además, cuando publiques tu proyecto te garantiza una buena optimización de los assets, lo que también será muy de agradecer.

Ahora se trata de examinar un poco más de cerca la documentación de Laravel y ver cómo se programan y configuran las tareas Gulp con Elixir.