一口氣重複的圖像，並轉換爲webp

Question

我已經添加了一個webp轉換到我的圖像任務在gulp。它做它在錫上所說的並轉換圖像。我真正想要實現的是圖像的重複webp版本，而不是取代它。

我的任務如下;

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