¡Buenos días!
Quiero automatizar la conversión de imágenes a formato webp . Para evitar hacerlo manualmente o mediante convertidores en línea, decidí usar gulp 4 y gulp-webp .
Esta es la estructura de anidamiento de carpetas en mi proyecto:
Quiero que Gulp, cuando encuentre una imagen, cree una carpeta llamada "webp" en el mismo nivel de anidamiento y coloque la imagen convertida en esta carpeta.
Quiero el siguiente resultado:
Mi Gulpfile.js :
let gulp = require('gulp'), webp = require('gulp-webp'); gulp.task('webp', () => { // './dev/img/**/*.{png,gif,jpg}' - all files in img and all files in subfolders in img return gulp.src('./dev/img/**/*.{png,gif,jpg}') .pipe(webp()) .pipe(gulp.dest(gulp.src)) //something like this, but it doesn't work } );Esto se puede hacer con la ayuda de gulp-rename .
Para instalar gulp-rename ejecute:
npm i -D gulp-renameLuego, en su gulpfile.js agregue la importación:
const rename = require('gulp-rename');Luego cambia tu transmisión de esta manera:
return gulp.src('./dev/img/**/*.{png,gif,jpg}') .pipe(webp()) .pipe(rename({ prefix: 'webp/' })) .pipe(gulp.dest('./dev/img')); La opción de prefix inserta "webp/" antes del nombre de archivo simple después del destino dest "./dev/img".