Comprime imágenes utilizando TinyPNG y Gulp

TinyPNG es una herramienta de compresión de imágenes muy fácil y rápida de utilizar y el día de hoy te enseñaré a cómo puedes automatizarla en tu proyecto con ayuda de Gulp.

Conseguir la API key de TinyPNG

Antes que nada necesitamos conseguir la API key de TinyPNG, para eso procedemos a entrar a la Developer API. Ya estando ahí, introducimos la información que nos piden, la cual sería nuestro nombre completo y un correo electrónico donde nos harían llegar la API key una vez terminemos de enviar el formulario.

Estructura de gulpfile

Ahora que tenemos nuestra API key podemos crear nuestro gulpfile, empezando por las dependencias que necesitaremos

1const gulp    = require('gulp'),
2      tinypng = require('gulp-tinypng')
3

posteriormente crearemos la tarea que se encargará de hacer el trabajo duro por nosotros

1gulp.task('tinypng', () => {
2    gulp.src('./origin-route/*.{png,jpg}')
3        .pipe(tinypng('your-api-key'))
4        .pipe(gulp.dest('./dest-route/'));
5})
6

Dentro de gulp.src() colocaremos la ruta donde se encuentran las imágenes que queremos comprimir, la terminación \*.{png,jpg} indica que tomará todos los archivos siempre y cuando tengan extensión png o jpg. En tinypng() debemos introducir la API key que se nos envió a nuestro correo electrónico y por último, en gulp.dest() llevará la ruta donde se guardarán las imágenes ya procesadas. Nuestro archivo debe verse algo así:

1const gulp = require('gulp'),
2      tinypng = require('gulp-tinypng')
3 
4gulp.task('tinypng', () => {
5    gulp.src('./dev/img/*.{png,jpg}')
6        .pipe(tinypng('L7MSsGfFjQoEW8Ddy9TYtKp7grmF5M9k'))
7        .pipe(gulp.dest('./public/img/'));
8})
9

Ya sólo nos queda ejecutar nuestra tarea

gulp tinypng

Por último, no olvides que tinyPNG sólo permite comprimir 500 imágenes mensuales a usuarios free, por lo que, al menos que adquieras una cuenta premium, es recomendable no abusar y pensar bien las imágenes que realmente necesites comprimir.