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

吞下重复的图像并转换为webp

1 个答案: