gulp-dust-html watch 任务不包含更新的模板

Question

似乎 example-template.dust 以某种方式被缓存了。第一次运行 gulp 默认任务它正确地采用当前版本的示例-template.dust 并在 index.html.

中正确呈现它

但后来对 example-template.dust 的更改未包含在呈现的 index.html 中，即使 watch 任务正确触发并执行了 dust 任务。

我认为这与一些配置错误有关。这是 gulp 任务和模板。其他一切正常。

示例-template.dust

Hello, from a template. Rendered with <b>{type}</b>

index.html

<!DOCTYPE html>
<html>
<head>
    <title>{name}</title>
    <link rel="stylesheet" href="main.css"/>
</head>
<body>
    <h1>version \{version}</h1>
    <p>
    {>example-template type="gulp"/}<br/>

    There are special escape tags that you can use to escape a raw { or } in dust.<br/>
    {~lb}hello{~rb}

    </p>
    <script src="main.js"></script>
</body>
</html>

gulp-灰尘-html任务

var gulp = require('gulp');
var dust = require('dustjs-linkedin');
var browserSync  = require('browser-sync');
var error = require('./errorHandling.js');
var dusthtml = require('gulp-dust-html');

var config = require('../../config.js');

gulp.task('dust', function () {
    return gulp.src(config.build.src+'/**/*.html')
        .pipe(dusthtml({
            basePath: config.build.src+'/',
            data: config.build.data
        }))
        .on('error', error)
        .pipe(gulp.dest(config.build.dev+'/'))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task('watch-dust', ['dust'], browserSync.reload);

观看任务

var gulp     = require('gulp');
var watch = require('gulp-watch');
var reload = require('browser-sync').reload;
var config = require('../../config.js');

gulp.task('watch', function() {
    gulp.watch(config.build.src+"/**/*.scss", ['sass', reload]);
    gulp.watch(config.build.images, ['images', reload]);

    gulp.watch([config.build.src+"/**/*.dust"], ['watch-dust', reload]);
    gulp.watch([config.build.src+"/**/*.html"], ['watch-dust', reload]);
});

默认gulp任务

gulp.task('default', ['browserSync','images', 'iconFont', 'sass', 'js', 'dust', 'watch']);

我也愿意接受其他建议。 Atm 我认为将 https://www.npmjs.com/package/gulp-shell 和 link 用于监视任务可能是个好主意。

ps: 我没有足够的声誉来创建 gulp-dust-html 标签

Answer 1

正如@Interrobang 所说，dust.config.cache = false 解决了它。

这是更新后的 gulp-dust-html 模块（不在 npm 上）

'use strict';
var gutil = require('gulp-util');
var path = require('path');
var fs = require('fs');
var through = require('through2');
var dust = require('dustjs-linkedin');

module.exports = function (options) {
  if (!options)
    options = {}
  var basePath = options.basePath || '.';
  var data = options.data || {};
  var defaultExt = options.defaultExt || '.dust';
  var whitespace = options.whitespace || false;

  dust.config.cache = options.cache || false; //default cache disabling of templates.
  dust.onLoad = function(filePath, callback) {
    if(!path.extname(filePath).length)
      filePath += defaultExt;
    if(filePath.charAt(0) !== "/")
      filePath = basePath + "/" + filePath;

    fs.readFile(filePath, "utf8", function(err, html) {
      if(err) {
        console.error("Template " + err.path + " does not exist");
        return callback(err);
      }
      try {
        callback(null, html);
      } catch(err) {
        console.error("Error parsing file", err);
      }
    });
  };

  if (whitespace)
    dust.optimizers.format = function (ctx, node) { return node; };

  return through.obj(function (file, enc, cb) {
    if (file.isNull()) {
      this.push(file);
      return cb();
    }

    if (file.isStream()) {
      this.emit('error', new gutil.PluginError('gulp-dust', 'Streaming not supported'));
      return cb();
    }

    try {
      var contextData = typeof data === 'function' ? data(file) : data;
      var finalName = typeof name === 'function' && name(file) || file.relative;
      var tmpl = dust.compileFn(file.contents.toString(), finalName);
      var that = this;
      tmpl(contextData, function(err, out){
        if (err){
          that.emit('error', new gutil.PluginError('gulp-dust', err));
          return; 
        }
        file.contents = new Buffer(out);
        file.path = gutil.replaceExtension(file.path, '.html');     
        that.push(file);
        cb();
      })
    } catch (err) {
      this.emit('error', new gutil.PluginError('gulp-dust', err));
    }
  });
};

gulp-dust-html watch 任务不包含更新的模板

gulp-dust-html watch task doesn't include updated templates

gulp

dust.js

gulp-watch