Introducción

Laravel Mix proporciona una API fluida para definir pasos de compilación de Webpack para tu aplicación de Laravel usando múltiples preprocesadores de CSS y JavaScript. A través de encadenamiento de métodos simples, puedes definir fluidamente tus pipelines de assets. Por ejemplo:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Si alguna vez has estado confundido o agobiado al comenzar con Webpack y la compilación de assets, amarás Laravel Mix. Sin embargo, no estás obligado a usarlo durante el desarrollo de tu aplicación. Eres libre de usar cualquier pipeline de assets que desees o incluso ninguno.

Instalación y configuración

Instalando Node

Antes de ejecutar Mix, debes asegurarte que Node.js y NPM están instalados en tu máquina.

node -v
npm -v

Por defecto, Laravel Homestead incluye todo lo que necesitas; sin embargo, si no estás usando Vagrant, entonces puedes fácilmente instalar la última versión de Node y NPM usando instaladores sencillos desde su página de descargas.

Laravel Mix

El único paso restante es instalar Laravel Mix. Dentro de una instalación nueva de Laravel, encontrarás un archivo package.json en la raíz de tu estructura de directorios. El archivo por defecto package.json incluye todo lo que necesitas para comenzar. Piensa en éste como tu archivo composer.json, excepto que define dependencias de Node en lugar de PHP. Puedes instalar las dependencias a las cuales hace referencia ejecutando:

npm install

Ejecutando Mix

Mix es una capa de configuración basado en Webpack, así que para ejecutar tus tareas de Mix sólo necesitas ejecutar uno de los scripts de NPM incluidos en el archivo package.json por defecto de Laravel:

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run production

Observando cambios en los assets

El comando npm run watch continuará ejecutándose en tu terminal y observando todos los archivos relevantes por cambios. Webpack entonces automáticamente recompilará tus assets cuando detecte un cambio:

npm run watch

Puedes encontrar que en algunos entornos Webpack no está actualizando los cambios en tus archivos. Si éste es el caso en tu sistema, considera usar el comando watch-poll:

npm run watch-poll

Trabajando con hojas de estilos

El archivo webpack.mix.js es el punto de entrada para toda la compilación de assets. Piensa en éste como un wrapper de configuración liviano alrededor de Webpack. Las tareas de Mix pueden ser encadenadas para definir exactamente cómo tus assets deben ser compilados.

Regístrate en Styde

Para obtener acceso a ésta y a todas nuestras lecciones y cursos premium:

Ver planes

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Lección anterior JavaScript y Estructuración de CSS - Documentación de Laravel 6 Lección siguiente Autenticación - Documentación de Laravel 6