Cuando trabajamos con desarrollo web debemos tener en cuenta muchos aspectos para optimizar el tiempo de carga de nuestras aplicaciones. Laravel Elixir es una herramienta que nos ayuda en este sentido, dándonos la oportunidad de compilar y minificar assets, de tal modo que podamos usar en producción archivos mucho mas livianos, por supuesto, todo esto es posible al gestor de tareas programadas Gulp.
Laravel Elixir es un paquete de Node.js que ha sido diseñado pensando específicamente en Laravel, pero a su vez, puede ser usado en otros tipos de proyectos como lo hicimos en el post Configuración de Elixir en proyectos fuera de Laravel. Hoy hablaremos de otro paquete de Node.js que nos permite comprimir todos los archivos de imagen de nuestra aplicación con Elixir y Gulp.
Instalacion de laravel-elixir-imagemin
Como lo mencionábamos anteriormente, este es un paquete de Node.js por lo cual, deberás tener disponible este último en tu máquina antes de iniciar. Para ello puedes seguir las instrucciones en nuestro post sobre Laravel Elixir.
Una vez que tengas instalado Node.js y todas las dependencias en tu proyecto puedes ejecutar:
$ npm install --save-dev laravel-elixir-imagemin
Configuración del directorio
Debes crear un directorio resources/assets/images e incluir allí todas las imágenes que deseas comprimir al ejecutar gulp.
Configuración de Elixir
En el archivo gulpfile.js debes incluir lo siguiente:
var elixir = require('laravel-elixir');
require('laravel-elixir-imagemin');
elixir(function(mix) {
mix.imagemin({
optimizationLevel: 3
});
});
optimizationLevel te permite definir el nivel de compresión a utilizar, puedes escoger un nivel mas alto o bajo dependiendo de lo que necesites.
Comprimiendo imágenes
Una vez configurado el archivo gulpfile.js puedes simplemente ejecutar «gulp» desde la consola y esto comprimirá todas las imágenes automáticamente. Finalmente deberás poder ver algo como esto en la consola:
[17:06:07] Finished 'version' after 74 ms [17:06:07] Starting 'imagemin'... [17:06:11] gulp-imagemin: Minified 2 images (saved 95.24 kB - 20.9%) [17:06:11] gulp-notify: [Laravel Elixir] ImageMin Complete! [17:06:11] Finished 'imagemin' after 3.8 s
Lo interesante es que esto no afecta directamente a tus archivos originales, básicamente lo que ocurre es que se crea una copia comprimida de cada imagen (usando el mismo nombre y extensión de archivo) dentro de la carpeta public/images
Como puedes ver es un plugin muy útil y realmente fácil de usar que puedes configurar en todos tus proyectos de Laravel o tus proyectos que usen laravel-elixir.
Si deseas aprender mucho más sobre Gulp, cómo crear tareas personalizadas, manejar los assets de tu aplicación de forma más profesional y algunos otros trucos, te recomiendo nuestro Curso de Gulp y Herramientas de Optimizacion donde Ramon Lapenta nos explica paso a paso cada uno de los componentes de esta poderosa herramienta.
Si tienes alguna duda puedes escribirnos en la sección de comentario, recuerda que puedes ayudar compartiendo este contenido en redes sociales. Te espero en una próxima lección.
Material Relacionado
- Bootstrap Sass en Laravel con Elixir y Gulp
- Pre requisitos para correr Gulp
- Editar archivos Sass en Laravel con Chrome Developer Tools
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
