通過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')); 
});