Gulp дублировать изображение и конвертировать в webp

Question

Я добавил преобразование webp в мою задачу изображений в Gulp. Он делает то, что он говорит на жестяне, и преобразует изображение. То, что я на самом деле хочу достичь, - это дублируемая веб-версия изображения, а не ее замена.

Моя задача:

gulp.task('images', function() { 
    return gulp.src(config.img) 
     // Only optimize changed images 
     .pipe(plugins.changed(config.dist.img)) 

     // Imagemin 
     .pipe(plugins.imagemin({ 
      optimizationLevel: 3, 
      progressive: true, 
      svgoPlugins: [{ 
       removeViewBox: false 
      }] 
     })) 

     .pipe(webp()) 

     // Set destination 
     .pipe(gulp.dest(config.dist.img)) 

     // Show total size of images 
     .pipe(plugins.size({ 
      title: 'images' 
     })); 
}); 

Я предполагаю, что преобразование должно произойти в дубликате оригинала, а не в оригинале.

Я новичок в Gulp, поэтому просто получаю голову над процессом.

Все остальное в этом процессе точно так, как должно быть.

Answer 1

gulp-clone plugin позволяет выполнять операции над копией файла и восстановить оригинал впоследствии:

gulp.task('images', function() { 
    var sink = plugins.clone.sink(); // init sink 

    return gulp.src(config.img) 
     // Only optimize changed images 
     .pipe(plugins.changed(config.dist.img)) 

     // Imagemin 
     .pipe(plugins.imagemin({ 
      optimizationLevel: 3, 
      progressive: true, 
      svgoPlugins: [{ 
       removeViewBox: false 
      }] 
     })) 

     .pipe(sink)  // clone image 
     .pipe(webp())  // convert cloned image to WebP 
     .pipe(sink.tap()) // restore original image 

     // Set destination 
     .pipe(gulp.dest(config.dist.img)) 

     // Show total size of images 
     .pipe(plugins.size({ 
      title: 'images' 
     })); 
});