ウェブでGulpを生成して最適化する

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

元のファイルをwebpの相手に出力するには、gulp-cloneを含める必要があります。それは次のようになります：

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