Laravel 5.4 #12 : Incluir assets y Laravel Mix

Hemos estado hablando un poco de todo, incluso que a ciertas cosas podemos darle el diseño que queramos, pero no hemos explicado como se incluyen estos archivos JS y CSS. Hoy vamos a explicar como hacerlo y también explicaremos una herramienta que tiene Laravel llamada Laravel Mix.

Laravel Mix es una herramienta que nos permite compilar y minificar nuestros assets (soporta preprocesadores CSS y JS) muy fácilmente.

Incluir CSS y JavaScript

Para incluir archivos CSS y JS, puedes ponerlos directamente en la carpeta public/css o public/js y después linkarlos desde el layout con la función asset():

Así ya estarían añadidos y podríamos ir añadiendo el código en estos archivos.

 

Laravel Mix

Laravel Mix es una herramienta que incluye Laravel basada en Webpack.js que nos permite minificar y compilar nuestros assets muy fácilmente.

Primero de todo necesitamos tener instalado Node.js, se puede descargar desde aquí.

Una vez instalado tendremos que ir a la raíz del proyecto y ejecutar el siguiente comando desde la línea de comandos, para instalar los paquetes que están en el archivo package.json . Serán los necesarios para poder utilizar Laravel Mix:

Cuando acabe este comando, para ejecutar Laravel Mix tendremos que ejecutar uno de estos comandos (según el entorno en el que estemos) desde la raíz también:

También podemos utilizar el siguiente comando que nos permite ir modificando el archivo mientras se recompila automáticamente cada vez que guardamos. Porque de la otra manera, tendríamos que ejecutar el comando de compilación cada vez que cambiemos algo en el archivo.

Para indicar qué archivos queremos que se compilen, debemos ir al archivo  webpack.mix.js . Ahí se añaden tanto los archivos JS como los preprocesadores CSS, como los CSS normales, todos los archivos se añaden ahí. Puedes encontrar más información en la documentación.

Por ejemplo, si utilizamos Sass como preprocesador tendríamos que poner esta línea:

Le indicamos la ruta donde está el archivo original y la ruta donde queremos que se guarde una vez compilado.

O esta línea si utilizamos Less:

Y si fuese un archivo JS:

 

Si quieres saber más sobre Laravel Mix y todas sus características, echa un vistazo a la documentación para profundizar más.

-

– Laravel Mix: https://laravel.com/docs/5.4/mix


Aloja tu proyecto en DigitalOcean: Obtén $200 de crédito gratis al registrarte a través de este enlace.

Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.

? CONTACTAR

Deja una respuesta

  Acepto la política de privacidad