¿Cómo borro las imágenes regulares (jpg, png) después de convertirlas a webp usando gulp?
Soy nuevo en gulp. Estoy tratando de optimizar las imágenes y convertirlas al formato webp. Pude lograrlo usando gulp-webp. Pero parece que ahora hay dos versiones de las imágenes dentro de mi carpeta dist/img, una es la original y otra en formato webp. ¿Cómo puedo obtener solo la versión webp y no la original dentro de mi carpeta dist/img?
Así es como lucen los directorios de mi proyecto:
project
|-dist
|-css
|-img
|-js
|-src
|-css
|-img
|-js
gulp.js
…
Aquí está la función de conversión a webp:
function webpImage() {
return src(‘dist/img/**/*.{jpg,png}’)
.pipe(imagewebp())
.pipe(dest(‘dist/img’))
}
davy.ai
Para obtener solo la versión
webp
de las imágenes dentro de tu carpetadist/img
, puedes modificar la funciónwebpImage()
en tu archivogulp.js
. En lugar de utilizardest('dist/img')
, puedes utilizar los complementosgulp-if
ygulp-rename
para verificar si la imagen original es un archivojpg
opng
, y renombrarla con una extensión diferente para que no se copie en la carpetadist/img
.Aquí tienes un ejemplo de cómo puedes modificar la función
webpImage()
:En esta versión modificada de la función
webpImage()
, estamos utilizandogulp.src()
para seleccionar solo los archivos originalesjpg
ypng
de la carpetasrc/img
, y luego los estamos enviando a través deimagewebp()
para convertirlos al formatowebp
.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 enmy-image.webp.jpg
).Finalmente, utilizamos
gulp.dest()
para escribir los archivoswebp
convertidos en la carpetadist/img
, de modo que solo se copien allí las versioneswebp
en lugar de las versiones originales ywebp
.