Seleccionar página

¿Que es?

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.

Se lanzo con Laravel 5.4, el cual es el sucesor de Laravel Elixir. Sin embargo, Laravel Mix está basado en Webpack en vez de Gulp.
Pero Webpack tiene una curva de aprendizaje mucho más empinada que Gulp y aquí es donde entra Laravel Mix: el cuál nos permite usar los features más relevantes de Webpack de una forma sencilla, rápida y casi transparente para nosotros los desarrolladores.

Link documentación oficial: www.laravel-mix.com

Tambien puedes ver la documentación de laravel:
https://laravel.com/docs/5.8/mix

Nota para usuarios que quieran usar laravel mix de forma avanzada:


Laravel Mix en realidad tiene un webpack.config.jsarchivo pre-configurado al que hace referencia cuando se ejecuta. Si necesita agregar alguna configuración personalizada, puede pasar la configuración del paquete web adicional al mix.webpackConfig()método.

¿Que puedo hacer con laravel-mix?

Aunque Laravel Mix está optimizado para el uso de Laravel, puede usarse para cualquier tipo de aplicación.

Proyectos Laravel

En una instalación limpia de laravel, laravel-mix ya viene incluido listo para ser ejecutado.

  • Instalar Laravel
  • correr npm install
  • ¡Visita tu webpack.mix.jsarchivo y comienza!

Ahora, desde la línea de comandos, puede ejecutar npm run watchpara observar los archivos en busca de cambios y luego volver a compilar.

Proyectos independientes

Comience instalando Laravel Mix a través de NPM o Yarn, y luego copie el archivo Mix de ejemplo en la raíz de su proyecto.

Ahora debería tener la siguiente estructura de directorios:

  • node_modules/
  • package.json
  • webpack.mix.js

El webpack.mix.jsarchivo es su capa de configuración en la parte superior del paquete web. 
La mayor parte de su tiempo se gastará aquí.

Dirígete a tu archivo webpack.mix.js:

Tome nota de las rutas de origen. Usted es libre de modificar las rutas para que coincidan con su estructura preferida, pero si está satisfecho con nuestros valores predeterminados, simplemente ejecute mkdir src && touch src/app.{js,scss}para crear los archivos / directorios. 
Estás todo listo ahora. 
Compila todo ejecutando node_modules/.bin/webpackdesde la línea de comandos.

Ahora deberías ver:

  • dist/app.css
  • dist/app.js
  • dist/mix-manifest.json (Su archivo de volcado de activos, que discutiremos más adelante.)

¡Buen trabajo! Ahora ponte a trabajar en ese proyecto.

NPM Scripts

Como sugerencia, considere agregar los siguientes scripts NPM a su package.jsonarchivo, para acelerar su flujo de trabajo. Las instalaciones de Laravel ya incluirán esto.

Para manejar diferentes entornos, estos scripts hacen uso de cross-env :

Conclusión

Como puede ver en las demostraciones, Laravel Mix ahorra mucho tiempo. No hay más necesidad de preocuparse por las configuraciones de paquetes web. Si no ha usado el paquete web anteriormente, esta es una excelente herramienta de entrada. Sin embargo, si lo ha usado antes, esto ayuda a simplificar todo el proceso.

Referencia de ejemplo : http://laravel-mix.com