Question

我在gulp-assemble使用gulp-watch时遇到问题。我希望gulp观看整个汇编源目录（data，includes，layouts和pages），并在文件发生变化时重新编译网站。< / p>

我能够使pages正常运行，但gulp在对data，includes或{{进行了更改时未重新编译网站1}}文件。

我已将layouts任务添加到watch存储库中的example gulpfile.js：

gulp-assemble

如果我运行var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'); var extname = require('gulp-extname'); var assemble = require('assemble'); var middleware = require('./examples/middleware'); var gulpAssemble = require('./'); // setup items on the assemble object assemble.data({site: {title: 'Blog'}}); assemble.data(['test/fixtures/data/*.{json,yml}']); assemble.layouts(['test/fixtures/layouts/*.hbs']); assemble.partials(['test/fixtures/includes/*.hbs']); // arbitrary middleware that runs when files loaded assemble.onLoad(/index\.hbs/, middleware(assemble)); // render templates in `test/fixtures` gulp.task('default', function () { gulp.src('test/fixtures/pages/*.hbs') .pipe(gulpAssemble(assemble, { layout: 'default' })) .pipe(htmlmin({collapseWhitespace: true})) .pipe(extname()) .pipe(gulp.dest('_gh_pages/')); }); // ============================================================ // my watch task // ============================================================ gulp.task('watch', ['default'], function() { gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']); });并将更改保存到gulp watch目录中的任何.hbs文件，我看到pages会触发我的gulp终端输出，我看到default中的.html文件更新了。

但是，如果我将更改保存到_gh_pages，.hbs或{{1}中的任何.json，.yml或data个文件}}目录，我看到includes在我的终端输出中触发layouts，但我看不到gulp default文件的更改。我必须手动运行_gh_pages任务才能将更改应用于.html文件。

为了获得理想的行为，我需要更改什么？

Answer 1

gulp-watch只会在默认任务的函数内执行代码，所以为了重新加载数据和布局，你需要将这些代码移到函数内部（就在gulp.src之前）

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
var extname = require('gulp-extname');
var assemble = require('assemble');
var middleware = require('./examples/middleware');
var gulpAssemble = require('./');

// arbitrary middleware that runs when files loaded
assemble.onLoad(/index\.hbs/, middleware(assemble));

// render templates in `test/fixtures`
gulp.task('default', function () {
  // setup items on the assemble object
  assemble.data({site: {title: 'Blog'}});
  assemble.data(['test/fixtures/data/*.{json,yml}']);
  assemble.layouts(['test/fixtures/layouts/*.hbs']);
  assemble.partials(['test/fixtures/includes/*.hbs']);

  gulp.src('test/fixtures/pages/*.hbs')
    .pipe(gulpAssemble(assemble, { layout: 'default' }))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(extname())
    .pipe(gulp.dest('_gh_pages/'));
});

// ============================================================
// my watch task
// ============================================================
gulp.task('watch', ['default'], function() {
  gulp.watch('test/fixtures/**/*.{hbs,yml,json}', ['default']);
});

gulp-assemble＆amp; gulp-watch在对数据，包含或布局进行更改时不重新编译站点

1 个答案: