通过Gulp生成并优化Webp

Question

我使用的是包含imagemin的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

您必须包含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')); 
});