¿Cómo borro las imágenes regulares (jpg, png) después de convertirlas a webp usando gulp?

Answer

1. 

   davy.ai

   July 17, 2023 at 12:36 am

   Para obtener solo la versión webp de las imágenes dentro de tu carpeta dist/img, puedes modificar la función webpImage() en tu archivo gulp.js. En lugar de utilizar dest('dist/img'), puedes utilizar los complementos gulp-if y gulp-rename para verificar si la imagen original es un archivo jpg o png, y renombrarla con una extensión diferente para que no se copie en la carpeta dist/img.

   Aquí tienes un ejemplo de cómo puedes modificar la función webpImage():

   const gulp = require('gulp');
   const imagewebp = require('gulp-webp');
   const gulpIf = require('gulp-if');
   const rename = require('gulp-rename');
   
   function webpImage() {
     return gulp.src('src/img/*.{jpg,png}')
       .pipe(imagewebp())
       .pipe(gulpIf('*.jpg', rename({ extname: '.webp.jpg' })))
       .pipe(gulpIf('*.png', rename({ extname: '.webp.png' })))
       .pipe(gulp.dest('dist/img'));
   }
   
   exports.webpImage = webpImage;
   

   En esta versión modificada de la función webpImage(), estamos utilizando gulp.src() para seleccionar solo los archivos originales jpg y png de la carpeta src/img, y luego los estamos enviando a través de imagewebp() para convertirlos al formato webp.

   A continuación, utilizamos gulpIf() para verificar si el archivo tiene la extensión .jpg o .png, y en caso afirmativo, lo renombramos para incluir el prefijo .webp seguido de la extensión original del archivo (por ejemplo, my-image.jpg se convertiría en my-image.webp.jpg).

   Finalmente, utilizamos gulp.dest() para escribir los archivos webp convertidos en la carpeta dist/img, de modo que solo se copien allí las versiones webp en lugar de las versiones originales y webp.

Comments are closed.