Gulp 复制图像并转换为 webp

Question

我在 Gulp 中为我的图像任务添加了 webp 转换。它按照罐子上的说明进行操作并转换图像。我真正想要实现的是图像的重复 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'
        }));
});

Gulp 复制图像并转换为 webp

Gulp duplicate image and convert to webp

gulp

webp