How can I create a subfolder in each folder through Gulp?

Question

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

    }
);

Answer 1

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".