Gulp - Optimización de imágenes

En este capítulo, aprenderá a optimizar imágenes. La optimización reducirá el tamaño de las imágenes y ayudará a una carga más rápida.

Instalar complementos para optimizar imágenes

Vaya al directorio "trabajo" desde su línea de comandos e instale los complementos "gulp-modified" y "gulp-imagemin" utilizando los siguientes comandos.

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

Declarar dependencias y crear tareas

En su archivo de configuración gulpfile.js, primero declare las dependencias como se muestra en el siguiente comando.

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

A continuación, debe crear tareas para optimizar imágenes como se muestra en el siguiente código.

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

los imageminLa tarea aceptará imágenes png, jpg y gif de la carpeta src / images / y las minimizará antes de escribirlas en el destino. loschanged()asegura que solo los nuevos archivos se pasen cada vez para minificar. El complemento gulp- modified solo procesará los nuevos archivos y, por lo tanto, utilizará un tiempo precioso.

Ejecutar las tareas

El archivo de configuración está configurado y listo para ejecutarse. Utilice el siguiente comando para ejecutar la tarea.

gulp

Al ejecutar la tarea con el comando anterior, recibirá el siguiente resultado en el símbolo del sistema.

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)