gulp-assemble & gulp-watch not recompiling site when changes are made to data, includes or layouts

Question

I'm having issues using gulp-assemble with gulp-watch. I want gulp to watch the entire assemble source directory (data, includes, layouts and pages) and recompile the site when ever a file changes.

I'm able to get this working correctly for pages, but gulp is not recompiling the site when changes are made to the data, includes or layouts files.

I've added a watch task to the example gulpfile.js in the gulp-assemble repository:

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

If I run gulp watch and save a change to any of the .hbs files in the pages directory, I see gulp trigger the default in my terminal output, and I see the .html file in _gh_pages update with the change.

However, if I save a change to any of the .hbs, .json, or .yml files in the data, includes or layouts directories, I see gulp trigger the default in my terminal output, but I see no changes to the _gh_pages .html file(s). I have to run the gulp default task manually in order to get the changes applied to the _gh_pages files.

What do I need to change in order to get the desired behaviour?

Answer 1

gulp-watch will only execute code inside the function for the default task, so to get things like data and layouts to reload, you'll need to move those pieces of code to inside the function (Just before 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']);
});