Gulp：根据文件名替换 HTML 文件中的变量答案

【问题标题】：Gulp: replace variables in HTML file based on file nameGulp：根据文件名替换 HTML 文件中的变量
【发布时间】：2016-02-04 08:18:33
【问题描述】：

我们的项目正在使用 Gulp。现在我有一个要求：我们有多个页面级 HTML 文件，比如 login.html 和 my.html。在这些原始 HTML 文件中，有一个名为 {{PAGE_TITLE}} 的变量，应将其替换（由 Gulp）分别为 "Login to System" 和 "My Account"。这是我当前的脚本：

gulp.task('pages', ['clean:tmp'], function () {
    var pageTitle = '';
    return gulp.src('/my/source/html/**/*.html')
        .pipe(tap(function (file, t) {
            pageTitle = /index.html$/.test(file.path) ? 'Login to System' : 'My Account';
        }))
        .pipe(replace(/{{PAGE_TITLE}}/g, pageTitle))
        .pipe(gulp.dest('/my/dest/'));
});

事实证明变量pageTitle 从未设置在replace 之前。我已经搜索了很多次gulp-tap 的文档，但我仍然不知道如何使它工作。请帮忙，谢谢。

这篇帖子：Modify file in place (same dest) using Gulp.js and a globbing pattern 试图达到同样的效果，但他得到了一些其他的解决方案。

【问题讨论】：

以前从未使用过那个 gulp 包，如果是我，我可能会使用 gulp-if 和 gulp-html-replace。不太干净，因为它不使用小胡子。您是否尝试将 pageTitle 设置为 module.exports 的全局变量？
谢谢。我们将 pageTitle 存储在单独的 JSON 文件中。我把它加载到 gulp 中。问题是应该根据文件名动态替换变量。这两个插件似乎不适合这种情况。
gulp-tap 允许我从gulp.src 访问文件名

标签： gulp gulp-tap

【解决方案1】：

我想出了以下解决方案：

gulp.task('pages', ['clean:tmp'], function () {

    function replaceDynamicVariables(file) {
        var pageTitle = /login.html$/.test(file.path) ? 'Login to System' : 'My Account';
        file.contents = new Buffer(String(file.contents)
            .replace(/{{PAGE_TITLE}}/, pageTitle)
        );
    }

    return gulp.src('/my/source/html/**/*.html')
        .pipe(tap(replaceDynamicVariables))
        .pipe(gulp.dest('/my/dest/'));
});

【讨论】：