0
288
ViewsHow can I create a subfolder in each folder through Gulp?
Good day!
I want to automate the conversion of images to webp format. To avoid doing it manually or via online converters, I decided to use gulp 4 and gulp-webp.
This is the structure of nesting folders in my project:
I want Gulp, when it finds a picture, so that it creates a folder called "webp" at the same nesting level and places the converted picture in this folder.
I want the following result:
My 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
}
);
·
Juan Pablo Isaza
1 answers
Answer question0
This can be done with the help of gulp-rename.
To install gulp-rename run:
npm i -D gulp-rename
Then in your gulpfile.js add the import:
const rename = require('gulp-rename');
Then change your stream like this:
return gulp.src('./dev/img/**/*.{png,gif,jpg}')
.pipe(webp())
.pipe(rename({ prefix: 'webp/' }))
.pipe(gulp.dest('./dev/img'));
The prefix option inserts "webp/" before the bare filename after the dest target "./dev/img".
·
Juan Pablo Isaza
Report
Answer question