Search code examples
gulpdust.jsgulp-watch

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


It seems that example-template.dust somehow gets cached. The first time running the gulp default task it correctly takes the current version of example-template.dust and renders it correctly in index.html.

But later changes to example-template.dust aren't included in the rendered index.html even though the watch task correctly fires and executes the dust task.

I'm thinking it has to do with some configuration errors. Here is the gulp tasks and templates. Everything else works.

example-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-dust-html task

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);

watch task

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]);
});

default gulp task

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

I'm open for alternative suggestions as well. Atm I'm thinking it could be an idea to use https://www.npmjs.com/package/gulp-shell and link it to the watch task.

ps: I don't have enough reputation to create a gulp-dust-html tag


Solution

  • As @Interrobang said, dust.config.cache = false solved it.

    Here is the updated gulp-dust-html module (not on 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));
        }
      });
    };