A continuación aprenderemos cómo compilar archivos CSS y JS en Laravel mediante Laravel Mix.
Ésta lección forma parte del Curso de Laravel desde Cero. Si quieres saber más sobre el curso completo 👉 entra aquí 👈.
Primeramente Laravel Mix es un paquete que ofrece una API sencilla con el cual podremos compilar los diferentes archivos css y js de nuestra aplicación.
Mix utiliza una serie de métodos en cadena para hacernos la vida un poquito más fácil al momento de hacer uso de webpack. No solamente compila si no también minimiza el código CSS o JS que hayamos escrito o que alguna librería nos haya provisto 🙀.
Para poder hacer uso de este paquete correctamente debes primero tener instalado en tu entorno de desarrollo Node.js y NPM. Este último se instalará junto a Node, es decir, ya vendrá con ese paquete.
Puedes verificar si ya tienes instalado Node.js y NPM utilizando el siguiente comando para verificar la versión:
node -v
npm -v
Si te aparece en pantalla la versión de los paquetes quiere decir que ya los tienes instalados.
Como último paso antes de empezar a compilar, es necesario correr el siguiente comando:
npm install
El comando anterior simplemente nos instalará en nuestro proyecto aquello que necesitamos para empezar a compilar con Laravel Mix.
Cabe resaltar que también tendremos un archivo llamado package.json que sería como el archivo composer.json pero con la diferencia que gestionará las dependencias de Node.js.
Por último para compilar nuestros assets podremos utilizar los siguientes comandos:
npm run dev
npm run prod
npm run watch
Existen más comandos pero los anteriores serían los que más se utilizan al momento de desarrollar en Laravel junto a Mix.
A continuación el videotutorial donde te explico detalladamente cómo compilar archivos CSS y JS en Laravel:
La documentación oficial sobre Laravel Mix la encuentras aquí:
https://laravel.com/docs/8.x/mix
Espero que con ésta herramienta te sea más fácil gestionar tus archivos CSS y JS independientemente del pre-procesador que estés utilizando.
Eso sería todo por este artículo, si tienes alguna duda o inconveniente puedes hacerla en los comentarios. Sin más que escribir, me despido y hasta la próxima 🖖.
Ésta lección forma parte del Curso de Laravel desde Cero. Si quieres saber más sobre el curso completo 👉 entra aquí 👈.