如何通过config.json在Gulp中替换HTML属性值？解决插件缓存问题

我帮你分析下这个问题——你遇到的gulp-token-replace在watch模式下不更新的情况，根源是Node.js的require()会缓存模块。第一次加载config.json后，后续调用require都会直接用缓存里的旧内容，不会重新读取修改后的文件。下面给你几个可行的解决办法：

方案1：清除Require缓存，修复原插件问题 #

如果想继续使用gulp-token-replace，只需要在每次读取JSON前手动清除缓存即可。修改你的tokenreplace任务：

gulp.task('tokenreplace', ['fileinclude'], function () {
    // 清除config.json的require缓存
    delete require.cache[require.resolve('./templates/components/000 vars/config.json')];
    var config = require('./templates/components/000 vars/config.json');
    
    return gulp.src('Temp/index.html')
        .pipe(gtr({ global: config }))
        .pipe(gulp.dest('HTMLTemplates/'))
        .pipe(browserSync.stream())
        .pipe(notify({ message: 'Vars includes complete' }));
});

这样每次执行任务时，都会重新读取最新的JSON文件，彻底解决缓存导致的不更新问题。

方案2：用原生Node.js + gulp-replace实现自定义替换 #

如果不想依赖第三方插件，可以用gulp-replace配合自定义函数实现占位符替换，完全可控且绕开缓存问题：

首先安装gulp-replace：

npm install gulp-replace --save-dev

然后修改你的tokenreplace任务：

var replace = require('gulp-replace');
var fs = require('fs'); // 引入文件读取模块

gulp.task('tokenreplace', ['fileinclude'], function () {
    // 用fs.readFileSync直接读取文件，避免require缓存
    var configContent = fs.readFileSync('./templates/components/000 vars/config.json', 'utf8');
    var config = JSON.parse(configContent);
    
    // 自定义正则匹配{{Table.key}}格式的占位符并替换
    return gulp.src('Temp/index.html')
        .pipe(replace(/\{\{Table\.([a-zA-Z0-9]+)\}\}/g, function(match, key) {
            // 找不到对应值时保留原占位符，避免页面出错
            return config.Table[key] || match;
        }))
        .pipe(gulp.dest('HTMLTemplates/'))
        .pipe(browserSync.stream())
        .pipe(notify({ message: 'Vars includes complete' }));
});

这个方法逻辑透明，你可以根据需求随时调整匹配规则，扩展性更强。

方案3：使用gulp-template（基于Lodash模板） #

另一个更灵活的替代插件是gulp-template，它支持Lodash的模板语法，完美匹配你现有的{{变量}}格式：

首先安装插件：

npm install gulp-template --save-dev

然后修改任务：

var template = require('gulp-template');
var fs = require('fs');

gulp.task('tokenreplace', ['fileinclude'], function () {
    var configContent = fs.readFileSync('./templates/components/000 vars/config.json', 'utf8');
    var config = JSON.parse(configContent);
    
    return gulp.src('Temp/index.html')
        .pipe(template(config)) // 直接传入配置对象，自动替换所有匹配的占位符
        .pipe(gulp.dest('HTMLTemplates/'))
        .pipe(browserSync.stream())
        .pipe(notify({ message: 'Vars includes complete' }));
});

这个插件除了简单变量替换，还支持条件判断、循环等高级模板功能，适合未来更复杂的场景。

额外优化建议 #

你的trp任务中使用的gulp.start在新版Gulp中已经被废弃，建议直接调整任务依赖或用runSequence控制顺序，简化代码：

// 重构AA任务，直接指定执行顺序
gulp.task('AA', function (cbk) {
    runSequence('fileinclude', 'tokenreplace', cbk);
});

之后watch JSON文件时，直接触发tokenreplace或AA即可，不需要中间的trp任务，代码结构会更清晰。

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