Aprende a usar Mix, la herramienta de Laravel para compilar los assets frontend de las apliciones web, realizando de manera sencilla el compilado, transpilado y minimizado del código Javascript y CSS.
Laravel es un framework Backend pero también nos ofrece excelentes herramientas para trabajar con la parte del frontend, ya que una parte fundamental de toda aplicación web es el Javascript y CSS. En las aplicaciones modernas se maneja gran cantidad de código frontend y en ocasiones gestionar la correcta generación y optimización de los assets no es tarea sencilla. Por ello en Laravel nos ofrecen una herramienta llamada "Mix" para realizar toda la operativa relacionada con la compilación y transpilación del código frontend, es decir, el CSS y el Javascript.
Básicamente Mix trabaja con Webpack por debajo, solo que permite olvidarse de todas sus complejidades de configuración y uso. Con un código muy sencillo Mix permite realizar las operaciones que se suelen hacer con Webpack en la mayoría de las aplicaciones. En este artículo te vamos a enseñar a utilizar sus principales funciones de Mix dentro del contexto de Laravel.
Laravel Mix apareció a partir de Laravel 5.4, para sustituir a Laravel Elixir. Además, dada la filosofía de Laravel, de ofrecer todo un stack desacoplado de utilidades, esta herramienta se puede usar independientemente del framework. Es decir, está completamente integrada con Laravel, pero también la podríamos usar en cualquier otro proyecto que requiera el trabajo con Javascript y CSS.
Instalar Laravel Mix
Realmente Mix ya viene activado cuando creamos un nuevo proyecto de Laravel, por lo que no necesitamos hacer nada en especial para poder a usarlo.
La única cuestión que debes de asegurarte es que se hayan instalado las dependencias de frontend, que son gestionadas por npm.
Para asegurarnos que tenemos las dependencias instaladas es necesario realizar estos dos pasos:
1.- Instalar NodeJS
La instalación de NodeJS es necesaria en el ordenador de desarrollo, no lo necesitas en el servidor de producción.
Para instalar Node tienes que hacer la operativa que requiera tu sistema operativo. Si es Windows es ejecutar un sencillo instalador, si es Linux tendrás que ejecutar un comando y si es Mac tienes varias alternativas. Entre todas las posibilidades, lo mejor es instalarlo mediante nvm, pero para aclarar todas las alternativas de instalación en cualquier sistema operativo lo más adecuado es que leas el artículo sobre Instalar NodeJS.
2.- Instalar las dependencias vía npm
Una vez iniciado un proyecto Laravel las dependencias de Javascript se almacenan en un archivo llamado package.json. Estas dependencias están especificadas, en el archivo package.json que nos proporciona Laravel ya creado, pero no instaladas.
De igual modo, si restauras un proyecto Laravel que te has traído de un repositorio Git, tendrás que instalar las dependencias frontend.
En ambas situaciones lo hacemos vía npm, con este comando:
npm install
Ejecutar Laravel Mix
Ahora, una vez ya tienes tus dependencias instaladas, puedes ejecutar Mix con los comandos de scripts npm disponibles.
Los scripts npm están también especificados dentro del archivo package.json. En ese archivo verás una propiedad llamada "scripts" que contiene una serie de comandos disponibles. Aparecerá algo parecido a esta imagen.
Cada uno de esos comandos se ejecutan desde consola con "npm run" seguido del nombre del comando que quieras lanzar.
Este es el comando para ejecutar el build de los archivos de frontend en modo "desarrollo".
npm run dev
Este comando sirve para compilar los archivos del frontend para producción:
npm run prod
Los archivos en modo "desarrollo" que generas con "npm run dev" son archivos más pesados, pero más rápidos de generar y que permiten localizar mejor los posibles errores en el código js o css. Lo ideal es compilar para desarrollo siempre, menos cuando vas a publicar una nueva versión del proyecto, en cuyo caso es muy importante que compiles los assets para producción.
Este comando sirve para hacer la compilación de los archivos con live reload, es decir, se recompilarán los archivos, en modo desarrollo, cada vez que se guardan cambios en ellos.
npm run watch
Además, si tu entorno de desarrollo no es capaz de detectar los cambios, existe otro comando que puedes usar:
npm run watch-poll
Localización de los archivos compilados
Una vez lanzados estos comandos, los archivos frontend compilados los encontrarás guardados en la carpeta "public" de tu proyecto laravel. Dentro de esta carpeta se almacenan los archivos en distintas subcarpetas,
- "public/js" para el archivo Javascript.
- "public/css" para el archivo CSS.
Pero estas localizaciones se pueden alterar si lo deseas. Para ello simplemente tienes que editar el archivo de configuración de Mix, que encuentras en la carpeta raíz del proyecto con el nombre "webpack.mix.js".
Ese archivo es donde puedes cambiar cualquier comportamiento y configuración de Laravel Mix. En un proyecto de Laravel nuevo contiene este código:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
Como puedes comprobar, las rutas de los archivos producidos están declaradas perfectamente en el código anterior, por lo que es muy fácil personalizar esos valores a los que necesites.
Cómo realizar los archivos fuente de Javascript
En el archivo "webpack.mix.js" también encuentras las rutas de los archivos de Javascript que van a ser compilados. En un primer momento encuentras una única ruta de archivo de Javascript que vas a compilar: "resources/js/app.js".
Ese es el archivo raíz de tu Javascript, donde tienes todo el código que se irá a introducir en tu bundle js. No obstante, lo normal es que organices tu código Javascript por archivos independientes, para facilitar el mantenimiento, de modo que desde "resources/js/app.js" harás los correspondientes "import" que sean necesarios.
De hecho, si abres el archivo "resources/js/app.js" encontrarás que tiene el siguiente código:
require('./bootstrap');
Esa línea de código quiere decir que se está importando el archivo "./bootstrap.js". Tú podrás poner todos los require que necesites para tu proyecto.
Tipos de importado de archivos Javascript
Solamente una aclaración para los que la necesiten. En Javascript hasta 3 maneras de importar archivos, aunque para los desarrolladores de Laravel nos interesan dos:
- Hay una manera digamos que "oficial", el estándar de los ES6 modules, que se incluyen con la sentencia "import" de Javascript.
- Hay una manera anterior a los ES6 modules que es la clásica de NodeJS, llamada CommonJS, que se hace con la sentencia require.
Ambas maneras las puedes utilizar en un archivo Javascript de tu proyecto, ya que el proceso de compilado del Javascript es capaz de interpretar ambas sentencias correctamente.
A veces depende de lo que quieras importar, lo tienes que hacer con el import o con el require para que funcione, pues depende de cómo se haya escrito la librería que estás importando. A veces es un poco lioso, pero con el tiempo te acostumbras a lidiar con esta situación. Generalmente las librerías más antiguas de Javascript funcionan bien si las importas con require. En tu propio código de Javascript, te recomiendo trabajar con el import de los ES6 modules, por tener un Javascript más respetuoso con los estándares.
Source maps en Mix
Es importante que uses los sourcemaps cuando trabajas con Javascript, para facilitar la tarea de encontrar los errores en el código, al compilar el Javascript en modo desarrollo.
Los sourcemaps entre otras cosas sirven para que, cuando te sale un error en Javascript, el número de línea que te aparezca en el error sea el mismo que tú tienes en tu propio archivo Javascript y no en los archivos compilados. Si no usas sourceMaps los errores te aparecerán en otros números de línea y en el archivo ya compilado, por lo que sería complejo interpretar qué está pasando.
Para que se generen los source maps tienes que encadenar el método sourceMaps(), de esta manera:
mix.js('resources/js/app.js', 'public/js')
.sourceMaps();
Trabajar con CSS y Laravel Mix
Mix está preparado para trabajar con diversas herramientas CSS. Actualmente Laravel se ha volcado a trabajar con Tailwind CSS, por lo que la configuración inicial está pensada para que se compile tu CSS mediante PostCSS.
Tailwind CSS usa PostCSS para generar el CSS que requiere tu proyecto, por eso Laravel te trae PostCSS de casa. Pero PostCSS es mucho más... en realidad es un set enorme de herramientas para transformar tu CSS. De todos modos, para que puedas usar Tailwind necesitarás instalarlo por tu cuenta. No obstante, recuerda que tú puedes instalar lo que necesites o desees, no necesariamente Tailwind CSS.
Si tu código dentro de "webpack.mix.js" lo dejas tal cual, sin ninguna configuración en especial en PostCSS, tal que aparece en un proyecto nuevo en Laravel, o simplemente omitiendo el tercer parámetro del método postCss():
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css');
Entonces tu CSS se compilará con una configuración simple pero bastante útil, realizando estos dos efectos:
- La unificación de todos los archivos CSS que tengas por separado y realices sus @import.
- La minificación del código CSS.
Tailwind CSS en Laravel Mix
Usar Tailwind CSS es sencillo, pero requiere que aprendas una serie de cosas que están explicadas en el Manual de Tailwind CSS.
Desde el punto de vista de Laravel Mix, debes saber que todos los plugins de PostCSS se cargan desde el array que envías como tercer parámetro en el método postCSS().
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
]);
Para que ese código funcione tendrás que haber instalado Tailwind y creado el archivo tailwind.config.js, como hemos explicado en el mencionado manual.
Usar Sass con Laravel Mix
En el caso que quieras usar Sass, también resulta muy sencillo gracias a Mix. En este caso simplemente invocarás el método mix.sass() en lugar de mix.postCss().
mix.sass('resources/sass/app.scss', 'public/css');
No tiene mucho sentido usar Sass y PostCSS a la vez, ya que sus funcionalidades se superponen bastante. También podrías conseguirlo, compiando con mix.sass y luego usando el método options() encadenado, donde podrías indicar que quieres procesar Tailwind a continuación. Puedes buscar algún tutorial en Internet que te lo explique. No vamos a entrar en este tema porque nos parece poco producente.
Conclusión
Hemos aprendido lo básico para trabajar con Laravel Mix en aplicaciones Laravel comunes. A partir de aquí todavía puedes realizar configuraciones más avanzadas que resuelvan necesidades específicas de proyectos grandes, donde quizás necesites varios bundles de Javascript. Mix facilita mucho las cosas, si lo llegas a necesitar.
La documentación está muy completa en el sitio de Laravel. Incluso hay un sitio específico de Mix, en el que aprenderás muchas otras configuraciones todavía más avanzadas.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...