optimization - 通过 Gulp 生成和优化 Webp

Question

我正在使用generator webapp其中包括图像最小值。我还添加了 imagemin-webp和 gulp-webp到我的构建。

我不确定如何实现。除了添加 webp 之外，我还想保留原始的 jpg 和 png 图像，并在运行 gulp build 任务时优化所有这些图像。

我对this stage感到困惑.

如何根据我当前的设置实现它:

const webp = require('gulp-webp');
const imageminWebp = require('imagemin-webp');

gulp.task('images', () => {
    return gulp.src('app/images/**/*')
    .pipe(webp())
    .pipe($.cache($.imagemin()))
    .pipe(gulp.dest('dist/images'));
});

目前，这仅生成未优化的 webp 文件，并且不会打包任何原始 jpg 和 png 文件。

Answer 1

这是我在2021年的选择。如果您有任何疑问，请问我。

const {src, dest, parallel, series, watch} = require('gulp');
const imagemin = require('gulp-imagemin');
const webp = require('imagemin-webp');
const extReplace = require('gulp-ext-replace');

const exportWebP = () => {
  return src(['./src/img/**/*.jpg', './src/img/**/*.png'], {base: 'src'})
    .pipe(imagemin([
      webp({
        quality: 60,
      })
    ]))
    .pipe(extReplace('.webp'))
    .pipe(dest('./app/'))
}

watch(['./src/img/**/*.jpg', './src/img/**/*.png'], exportWebP);
exports.default = series(parallel(exportWebP));