Comprimir Imágenes y Fotografías con Gulp.js

Comprimir nuestras imágenes y fotografías para deducir el volumen de su peso es algo que hay que tener en consideración.

Anteriormente escribí un post de comprimir imágenes y fotografías con herramientas online.

En esta ocasión les voy a compartir el código para implementar nuestra aplicación para comprimir imágenes con Gulp.js.

Instalaciones Previas

  1. Instalar Node.js.
  2. Instalar y conocer lo básico de Gulp.js.

Paquetes Gulps.js & Node.js

$ npm install gulp-imagemin --save-dev 
$ npm install imagemin-pngcrush --save-dev 
$ npm install gulp-watch --save-dev
$ npm install gulp-notify --save-dev

Código Package.json

Si deseas copia y luego pega el código en el archivo package.json.

{
  "name": "comprimir-imagenes",
  "version": "1.0.0",
  "description": "Comprimir Imágenes y Fotografiás Utilizando la Herramienta Gulp.js",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Rene Mas Mas",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-watch": "^4.3.11",
    "imagemin-pngcrush": "^5.0.0"
  }
}

Para instalar los paquetes ejecuta el comando npm install, este comando empezada a descargar los paquetes de la lista devDependencies del archivo package.json.

Script Gulpfile.js

Para finalizar copia y luego pega el script en el archivo gulpfile.js.

const gulp = require('gulp');  
const imagemin = require('gulp-imagemin'); //Compresor de imágenes  
const imageminPngcrush = require('imagemin-pngcrush'); //Optimiza las imágenes .PNG  
const watch = require('gulp-watch'); //Sirve para mantener vigilando los cambios de una tarea  
const notify = require('gulp-notify'); //Muestra un mensaje callback

//Tarea para Comprimir Imagenes
gulp.task('comprimir-images', function(){  
    return watch('./images/**/*', function () { //Comprueba si hay cambios en la carpeta y subcarpetas de images
        gulp.src('./images/*.{png,jpg,jpeg,gif,svg}') //Ruta donde buscara las imágenes con extensiones .{png,jpg,jpeg,gif,svg} a comprimir
        .pipe(
            imagemin({
              plugins:[imageminPngcrush()] //Optimiza la conversión de imágenes PNG
            }))
        .pipe(gulp.dest('dist/images')) //Ruta donde se guardaran la imágenes comprimidas
        .pipe(notify("Ha finalizado la compresión de imágenes!")); //Muestra un mensaje cuando termina la tarea
    });
});

//Tarea por Defecto
gulp.task('default',['comprimir-images']);  

Ahora para realizar las compresiones, coloca todas las imágenes en la carpeta images y para finalizar ejecuta el comando:

$ gulp

Comprimir Imágenes con Gulp.js

Mensaje similar que debería observar en su consola de comandos.

Descargar la Aplicación Gulp.js (comprimir-imágenes)

Aplicación Gulp.js que sirve para comprimir nuestras imágenes.

comprimir-imagenes-gulpjs

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Hola, soy desarrollador front-end & dasarrollador móvil (Android), me encanta las tecnologías web - móvil, también administro este blog.

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión