Comparte en Facebook Twitter Google+

laravel-elixir-imagemin

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:

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:

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:

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

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.