handlebars partials do not reload in combination with gulp watch

[elisechant]

With the following gulp-hb configuration:

gulp.task('templates', function() {
    return gulp.src(paths.src.templates + '/**/*.html')
        .pipe(hb({
            partials: [
                paths.src.templates + '/**/*.hbs'
            ]
        }))
        .pipe(gulp.dest(paths.dest.root));
});

And the following watch task:

gulp.task('watch',  function() {
    gulp.watch(paths.src.templates + '/**/*', ['templates', function() {
        return browserSync.reload();
    }]);
});

Although this watch task triggers the 'templates' task to rerun on all template file changes, only changes to Handlebars Templates (.html) update and never Handlebars Partials. Handlebars Partials appear to become cached by gulp-hb. Is it possible to force the partials to update or could this be a bug?

[shannonmoeller]

Oh, good call. gulp-hb uses require-glob and handlebars-registrar behind the scenes. Fortunately I also own those modules. I'll need to add an option to require-glob to allow forcing a reload, then pass the option through from here.

I'll add a reload boolean option to this plugin.

[backflip]

I have been successfully using https://www.npmjs.com/package/require-new in similar situations, might be an option.

[shannonmoeller]

I've added bustCache and debug options and released them as v2.4.0. See README.md for details.

[admbtlr]

Thanks! Was just trying to work around this yesterday...

[elisechant]

@shannonmoeller awesome stuff, confirming bustCache works as expected. And liking the debug flag.

[shannonmoeller]

@elisechant Thanks for confirming!

[jensbambauer]

Interesting, I just came across a similiar issue:

function compileHandlebars() {
    return gulp
        .src('./*.html')
        .pipe(
            hb({ debug: true, bustCache: true })
                .partials('./src/components/threesixty/threesixty.hbs')
                .helpers({
                    JSONString: object => JSON.stringify(object),
                })
                .data({ assetPath: `/${paths.assets}` })
                .data(handlebarData),
        )
        .pipe(gulp.dest(path.resolve(__dirname, paths.tmp)));
}

gulp.watch(
        [`./${paths.src}/**/*.hbs`, './*.html', `./${paths.src}/**/*.json`],
        gulp.series(compileHandlebars, js, reload),
    );

Changing something in my html file works fine. But when changing the threesixty.hbs partial the changes are not visible until I edit the html file or restart gulp.

I'm using gulp 4 and gulp-hb 8 Any ideas?

[shannonmoeller]

@jensbambauer That’s odd. I’d expect that to work fine based on your setup. Mind opening a new issue for this?

[jensbambauer]

Sure, I will open a new issue. My workaround now is to have a watcher for the hbs files which just update the html file date :)

[jensbambauer]

https://github.com/shannonmoeller/gulp-hb/issues/67