gulp-dust-html监视任务不包括更新的模板

时间:2015-09-23 09:59:15

标签: gulp dust.js gulp-watch

似乎example-template.dust以某种方式被缓存。第一次运行gulp默认任务时,它正确地获取了example-template.dust的当前版本并在index.html中正确呈现它。

但是后来对example-template.dust的更改未包含在呈现的index.html中,即使监视任务正确触发并执行灰尘任务。

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

例如-template.dust

<!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>

的index.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);

gulp-dust-html任务

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.task('default', ['browserSync','images', 'iconFont', 'sass', 'js', 'dust', 'watch']);

默认gulp任务

 <TableRow
    android:id="@+id/loginRow"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp" >

    <TextView
        android:id="@+id/loginTextView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".33"
        android:text="login_text_view" />

    <EditText
        android:id="@+id/loginEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="text" >

        <requestFocus />
    </EditText>
</TableRow>

我也愿意接受其他建议。 Atm我认为使用https://www.npmjs.com/package/gulp-shell并将其链接到监视任务可能是一个想法。

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

1 个答案:

答案 0 :(得分:0)

正如@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));
    }
  });
};