Gulp技术问询：将克隆图片转WebP并保留原文件扩展名

现有Gulp工作流实现以下功能：克隆源文件夹中的jpg和png图片，将克隆的图片转换为WebP格式，然后将原图和WebP格式图片都复制到目标文件夹。

当前运行后目标文件夹包含文件：

example.jpg
example.webp
foo.png
foo.webp

希望WebP版本保留原文件扩展名（.jpg或.png），仅追加.webp扩展名，目标文件夹最终呈现为：

example.jpg
example.jpg.webp
foo.png
foo.png.webp

现有工作流代码如下：

import * as clone from "gulp-clone";
import * as size from "gulp-size";
import * as webp from "gulp-webp";

function copyImages() {
    var sink = clone.sink();  // init sink

    return src(conf.images.src + '**/*')
        .pipe(sink)        // clone image
        .pipe(webp())      // convert cloned image to webp
        .pipe(sink.tap())  // restore original image
        .pipe(dest(conf.images.dest))
        .pipe(size({
            title: 'images'
        }));
}

要实现WebP文件保留原扩展名并追加.webp的需求，需要借助gulp-rename插件修改文件命名规则，具体步骤如下：

1. 安装gulp-rename依赖：

npm install gulp-rename --save-dev

2. 修改工作流代码，引入插件并添加重命名逻辑：

import * as clone from "gulp-clone";
import * as size from "gulp-size";
import * as webp from "gulp-webp";
import * as rename from "gulp-rename"; // 新增引入

function copyImages() {
    var sink = clone.sink();

    return src(conf.images.src + '**/*')
        .pipe(sink)
        .pipe(webp())
        // 新增重命名逻辑：保留原扩展名，追加.webp后缀
        .pipe(rename(function(path) {
            path.extname = path.extname + '.webp';
        }))
        .pipe(sink.tap())
        .pipe(dest(conf.images.dest))
        .pipe(size({
            title: 'images'
        }));
}

逻辑说明 #

• rename回调函数中，path.extname对应原文件的扩展名（如.jpg），直接拼接.webp后，就会生成.jpg.webp格式的文件名。
• 原有克隆流的逻辑保持不变，确保原图和修改后的WebP文件都能被输出到目标目录。

内容的提问来源于stack exchange，提问作者biedert