基于Gulp的Webp生成与优化

p8h8hvxi  于 2022-12-08  发布在  Gulp
关注(0)|答案(2)|浏览(173)

我使用的是包含imagemin的generator webapp,我还将imagemin-webpgulp-webp添加到我的构建中。
我不确定如何实现。我想保留原来的jpg和png图像除了添加webp,并有所有这些图像优化时,运行gulp build任务。
我现在很困惑。
如何基于当前设置实现它:

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文件。

vqlkdk9b

vqlkdk9b1#

这是我在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));
p1iqtdky

p1iqtdky2#

您必须包含gulp-clone才能输出原始文件及其webp对应文件。

const webp = require('gulp-webp');
const imageminWebp = require('imagemin-webp');
const clone = require('gulp-clone');
const clonesink = clone.sink();

gulp.task('images', () => {
    return gulp
        .src('app/images/**/*')
        .pipe($.cache($.imagemin())) // optimize images before converting
        .pipe(clonesink) // start stream
        .pipe(webp()) // convert images to webp and save a copy of the original format
        .pipe(clonesink.tap()) // close stream and send both formats to dist
        .pipe(gulp.dest('dist/images'));
});

相关问题