How do you optimize images in gulp?

Question

gulp.js

Actually, subject.
I can't set up tasks for compressing and converting images to webp format. I need your help!
After reading the docks and looking at examples from a year ago, I set up tasks as best I could, it does not help.
With default settings, the images are simply transferred to the folder, but not compressed. In Vizhl Studio info, the sizes of the original and new images are the same.
Tried various combinations, all to no avail.
I know it's nonsense, but now the task looks like this:

imagemin = require('gulp-imagemin'),
    imageminJpegtran = require('imagemin-jpegtran'),
    imageminOptipng = require('imagemin-optipng'),
    imageminWebp = require('imagemin-webp'),

    extReplace = require("gulp-ext-replace");

gulp.task('imagemin', () => {
    return gulp.src('build/src/**/*')
        .pipe(cache(imagemin([
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            {
                interlaced: true,
                progressive: true,
                use: [
                    imageminJpegtran({
                        progressive: true,
                        max: 80,
                        min: 70
                    }),
                    imageminOptipng({
                        optimizationLevel: 5,
                    }),
                    imageminWebp({
                        quality: 50
                    })
                ]
            }
        ])))
        .pipe(extReplace('.webp'))
        .pipe(gulp.dest('src/new'))
});

I don't know what to do anymore -_-.

Answer 1

Hey!
If you look at the problem from the other side, then nginx can help, which will resize and cache images on the fly, when accessing an image with, say, query parameters.
To do this, you can install ngx_http_image_filter_module and ngx_http_proxy_module
(I note that it does this very quickly)