如何在Gulp的pipe管道内循环调用gulp-replace实现批量文本替换？

错误原因 #

• pipe() 仅支持接收单个流作为参数，你直接传入map返回的函数数组不符合要求，因此触发TypeError: dest.on is not a function报错
• 数组索引引用错误：textValues的每个子元素结构为[占位符, 替换值]，你写的item[1][0]会读取到未定义值，也会引发逻辑异常
• 原单条替换代码存在笔误：textValuess多写了一个s，实际应为textValues

方案1：遍历数组逐个挂载替换流（兼容性最好） #

和你原本单条替换的逻辑完全一致，直接用reduce把所有替换流依次拼接即可：

gulp.task('update-html-custom:dist', function () {
    // 初始值为读取html文件的流，每次迭代追加一个replace处理
    return textValues.reduce((stream, [searchStr, replaceStr]) => {
        return stream.pipe(stringReplace(searchStr, replaceStr));
    }, gulp.src([paths.src.custom.html + '/**/*.html']))
    .pipe(gulp.dest(paths.dist.custom.html));
});

方案2：单replace+函数回调实现批量替换（性能更优） #

利用gulp-replace支持函数回调的特性，只需一次replace处理即可完成所有匹配项替换，避免多次流操作：

gulp.task('update-html-custom:dist', function () {
    // 先将二维数组转为对象，简化替换值查找逻辑
    const replaceMap = Object.fromEntries(textValues);
    return gulp.src([paths.src.custom.html + '/**/*.html'])
        // 正则请根据你的占位符命名规则调整，以下示例匹配所有global-开头的占位符
        .pipe(stringReplace(/global-[a-zA-Z0-9-]+/g, match => {
            // 匹配到的占位符存在替换值就替换，不存在则返回原内容
            return replaceMap[match] ?? match;
        }))
        .pipe(gulp.dest(paths.dist.custom.html));
});

注：如果你的占位符包含正则特殊字符（比如.、*等），可以先对所有占位符做正则转义后再拼接生成动态正则，避免匹配异常。

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