Laravel Mix, el procesador de CSS y JS de Laravel 5.4

Laravel Mix, el procesador de CSS y JS de Laravel 5.4

Con el lanzamiento de la versión 5.4 de Laravel, su sistema de compilado de assets (CSS y JS) sufrió varios cambios y mejoras sustanciales en cuanto a su funcionamiento. Laravel Mix es el sucesor de Laravel Elixir y, al contrario que su antecesor, está basado en Webpack y no en GulpLaravel Mix provee al usuario de una potente y versátil API que le permitirá definir de forma rápida y sencilla el procesado de CSS y JavaScript, entre otras cosas.

 

Primeramente tendremos que instalar Node.js y NPM. Por defecto, Laravel Homestead trae consigo todo lo que necesitamos para utilizar Laravel Mix. Lo único que queda por hacer es instalar los paquetes necesarios que vienen ya incluidos en el fichero package.json.

 

Para poner en funcionamiento a Laravel Mix basta con invocar desde la terminal uno de los scripts que ya vienen por defecto:

 

En el fichero webpack.mix.js es donde definiremos todas las tareas que se llevarán a cabo cuando Laravel Mix se ejecute. Este fichero es un archivo de configuración para definir cómo y en qué orden se irán ejecutando las tareas definidas.

Por lo general, las tareas que se indican en este archivo van dirigidas al directorio /public, llamado así por defecto, de nuestro proyecto. Si modificamos ese nombre tendremos que indicarselo a Laravel Mix utlizando el método mix.setPublicPath('mi_carpeta').

 

Hojas de estilo

Laravel Mix nos permite compilar nuestro CSS con las extensiones SASS, LESS y STYLUS con los siguientes métodos:

  • mix.less(origen, destino, [{less_plugin_in_options}]);
  • mix.sass(origen, destino, [{sass_plug_in_options}]);
  • mix.stylus(origen, destino, [{use: [ require('npm_modulo')() ]}]);

 

Además de procesar nuestro CSS con la extensión que queramos, podremos procesar la salida de nuestro CSS ya que PostCSS viene ya incluido en Laravel Mix. Por defecto, el plug-in Autoprefixer aplica todos los prefijos vendor a las propiedades CSS3 que lo necesiten. Además, es posible añadir plug-ins adicionales. Tan solo es preciso instalarlos a través de NPM y referenciarlos en la option de PostCSS de la siguiente forma:

mix.sass(origen, destino)
   .options(
      postCss: [
         require('mi_plugin')()
      ]
   });

También podemos concatenar CSS puro en un solo fichero utilizando el siguiente método:

mix.styles(
   origen1,
   origen2,
destino);

Es importante entender que Laravel Mix, puesto que esta basado en Webpack, optimizará y reescribirá las rutas de las propiedades de nuestro CSS que contengan url(), pudiendo así escribir rutas relativas en nuestro código CSS y obteniendo las rutas absolutas en el codigo compilado. De esta forma, teniendo esta línea en nuestro código SASS:

.logo {
   background: url('../imagenes/mi_imagen.jpg');
}

Laravel Mix obtendra la imagen mi_imagen.png y la copiará en public/images, dando como resultado:

.logo {
   background: url(/images/mi_imagen.jpg?d41d8cd98f00b204e9800998ecf8427e);
}

 

Código JavaScript

Las principales características para JavaScript que trae consigo Laravel Mix son: la posibilidad de compilar ECMAScript 2015, minificar el archivo resultante, concatenar archivos de JavaScript puros, el uso de módulos y la compilación de archivos .vue. Todo esto se consigue en una sola línea:

mix.js(origen, destino);

Por otro lado, también tenemos la posibilidad de encapsular aquel código que presumiblemente no va a ser modificado, como librerías y plug-ins, en un fichero a parte con el fin de no obligar al navegador a tener que descargar una y otra vez ese mismo código cada vez que realicemos cualquier cambio en nuestro código. Así pues la siguiende línea creará un archivo vendor.js que contendrá las librerías y módulos que le indiquemos en el array:

mix.js(origen, destino)
   .extract(['mi_modulo']);

De esta forma se generarán los siguientes archivos:

  • manifest.js. Archivo que contiene el manifest runtime de Webpack para la carga de las librerías y módulos.
  • vendor.js. Archivo con nuestras librerias y módulos indicados en el método extract.
  • app.js. Archivo con nuestro código.

 

Cabe recordar que el orden de carga de los scripts es el listado arriba.


Si utilizamos React podemos indicarle a Laravel Mix que descargue automáticamente los plug-ins necesarios sustituyendo mix.js() por mix.react().


Al igual que con las hojas de estilo, también podemos concatenar archivos JS en uno único con la sigueinte línea:

mix.scripts([
   origen1,
   origen2
, destino);

Si en vez de utilizar el método mix.scripts() utilizamos mix.babel() obtenemos el mismo archivo concatenado pero con el código JS ES2015 traducido a código JS puro.

 

Podemos habilitar el use de source maps, con el fin de facilitar tareas de debugging, si así lo quisieramos de la siguiente manera:

mix.js(origen, destino)
   .sourceMaps();

 

Versionado

Laravel Mix tambien brinda al usuario la posibilidad de versionar los archivos finales compilados. Esto se traduce en que a dichos archivos se les añade un código hash generado automáticamente por Laravel Mix. Para ello utilizaremos el método mix.version() y tendremos que llamar a la funcion mix con la ruta de los archivos compilados, tal y como se describe a continuación:

<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
<script src="{{  mix('/js/app.js') }}"></script>

La ruta con el código hash viene indicada en un archivo llamado mix-manifest.json, generado automáticamente por Laravel Mix al utilizar este método.

 

Sincronización con el navegador

Si lo deseamos, podemos activar la recarga de la página de nuestro navegador de forma automática cada vez que se guarde cualquier cambio en nuestro código. Para ello basta con indicar el dominio de nuestro proyecto a través del método mix.browserSync('mi_dominio') y utilizar el comando npm run watch.


Copia de archivos y directorios

Con los métodos mix.copy(origen, destino) y mix.copyDirectory(origen, destino) podemos copiar archivos y directorios (manteniendo su estructura) respectivamente.

 

Variables de entorno

Podemos utilizar variables en nuestro archivo webpack.mix.js utilizando el objeto process.env y declarando las variables en el archivo .env con el prefijo MIX_. así pues podemos definir la siguiente variable en el archivo .env:
MIX_MI_NOMBRE=mi_nombre

Y podemos invocarla en el archivo webpack.mix.js así:

process.env.MIX_MI_NOMBRE

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario: