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():
|
1 2 3 |
<link href="{{ asset('css/example.css') }}" rel="stylesheet"> <script src="{{ asset('js/example.js') }}"></script> |
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:
|
1 |
npm install |
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:
|
1 2 3 4 5 |
// Ejecuta Laravel Mix, pero no minifica los archivos. Para test. npm run dev // Ejecuta Laravel Mix y minifica todos los archivos. Siempre en producción. npm run production |
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.
|
1 |
npm run watch |
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:
|
1 2 3 |
mix .sass('resources/assets/sass/app.scss', 'public/css') ... |
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:
|
1 2 3 |
mix .less('resources/assets/less/app.less', 'public/css') ... |
Y si fuese un archivo JS:
|
1 2 3 |
mix .js('resources/assets/js/app.js', 'public/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
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