如何通过 config.json 文件将 HTML 属性中的值替换为 Gulp？

Question

假设我有一个 JSON 文件，其中包含对：

{
  "Table":{
    "fullwidth": "680",
    "color": "#33d025",
    "margin1": "30",
    "margin2": "60",
    "padding": "20"
  }
}

然后，我想读取这些值并使用它们替换 html 文件中的属性，如下所示：

<table width="{{Table.fullwidth}}" bgcolor="{{Table.color}}" style="margin: {{Table.margin1}}px {{Table.margin2}}px;">
  <tr>
    <td style="padding: {{Table.padding}}px;">
      <img src="a.jpg">
    </td>
  </tr>
</table>

因此，html 文件位于 "temp/" 路径中，在 gulping 之后，我在 "dist/" 中获得了一个有效的 html 文件属性更改如下所示：

<table width="680" bgcolor="#33d025" style="margin: 30px 60px;">
  <tr>
    <td style="padding: 20px;">
      <img src="a.jpg">
    </td>
  </tr>
</table>

我已经尝试过 gulp-token-replace 但是在运行一次之后，如果我在 json 文件中保存新值它就不会再工作了，即使当它触发监视功能时，迫使我重新启动 "gulp".

是否有 gulp 插件可以做到这一点？或者可以替代 gulp-token-replace?

的技术

也许只是 javascript，但是，我可以从 gulp 进程中运行类似的东西吗（运行宁观察刷新它）？

Gulpfile.js 根据要求：

// Include gulp
var gulp = require('gulp'),

// Include plugins
fileinclude = require('gulp-file-include'),
rename = require('gulp-rename'),
images = require('gulp-imagemin'),
cache = require('gulp-cache'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
runSequence = require('run-sequence'),
del = require('del'),
notify = require('gulp-notify'),
gtr = require('gulp-token-replace')

// Default Task
gulp.task('default', function (cb) {
runSequence('clean', ['AA', 'BB', 'CC', 'watch'], cb);
});

// TASKS

// Clean 'dist'
gulp.task('clean', function () {
return del(['HTMLTemplates/*.html', 'HTMLTemplates/img', 'Temp/*.html']);
});

// Compress images
gulp.task('BB', function () {
gulp.src('templates/img/*.{gif,jpg,png}')
    .pipe(cache(images({
        optimizationLevel: 4,
        progressive: true,
        interlaced: true
    })))
    .pipe(gulp.dest('Templates/img/'));
});

// Reload browser
gulp.task('reload', function () {
browserSync.reload();
});

// Prepare Browser-sync
gulp.task('CC', ['AA'], function () {
browserSync.init({
    // browserSync.init(['templates/*/*.html'], {
    //proxy: 'your_dev_site.url'
    server: {
        baseDir: './HTMLTemplates'
    }
});
});

// MAIN TASKS

gulp.task('AA', function (cbk) {
runSequence('fileinclude', 'trp', cbk);
});

// Force to run fileinclude first before replacing the tokens
gulp.task('trp', ['fileinclude'], function (done) {
function onFinish(event) {
    if (event.task === 'tokenreplace') {
        gulp.removeListener('task_stop', onFinish);
        done();
    }
}
gulp.on('task_stop', onFinish);
gulp.start('tokenreplace');
});

// Include partial files into email template (fileinclude)
gulp.task('fileinclude', function () {
// grab 'template'
return gulp.src('templates/layouts/*.tpl.html')
    // include partials
    .pipe(fileinclude({
        basepath: 'templates/components/'
    }))
    // remove .tpl.html extension name
    .pipe(rename({
        extname: ""
    }))
    // add new extension name
    .pipe(rename({
        extname: ".html"
    }))
    // move file to folder
    .pipe(gulp.dest('Temp/'))
    .pipe(notify({
        message: 'Template file includes complete'
    }));
});

// Replace tokens in the index.html created by fileinclude
gulp.task('tokenreplace', ['fileinclude'], function (doit) {
var config = require('./templates/components/000 vars/config.json');
return gulp.src('Temp/index.html')
    .pipe(gtr({
        global: config
    }))
    .pipe(gulp.dest('HTMLTemplates/'))
    // notify to say the task has complete
    .pipe(browserSync.stream())
    .pipe(notify({
        message: 'Vars includes complete'
    })), doit();
});

// END of MAIN TASKS

// WATCH

// Watch files for changes in html/css/tpl.html/images
gulp.task('watch', function () {
gulp.watch(['templates/components/**/*.html'], ['AA']);
gulp.watch(['templates/components/**/*.css'], ['AA']);
gulp.watch(['templates/layouts/*.tpl.html'], ['AA']);
gulp.watch(['templates/components/000 vars/*.json'], ['trp']);
gulp.watch(['HTMLTemplates/*.html'], ['reload']);
gulp.watch('templates/img/*', ['BB']);
});

Answer 1

我直接从 Gulp 令牌替换插件的开发者那里收到了答案，所以我回答了我自己的问题以供存档。

替换为：

// Replace tokens in the index.html created by fileinclude
gulp.task('tokenreplace', ['fileinclude'], function (doit) {
  var config = require('./templates/components/000 vars/config.json');
  return gulp.src('Temp/index.html')
  .pipe(gtr({
  global: config
}))

有了这个：

// Replace tokens in the index.html created by fileinclude
gulp.task('tokenreplace', ['fileinclude'], function (doit) {
  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
}))

现在它就像一个魅力！

如何通过 config.json 文件将 HTML 属性中的值替换为 Gulp？

How I replace values in HTML attributes via config.json file with Gulp?

javascript

json

gulp

gulp-watch

gulp-cheerio