BrowserSync: Reload HTML on Change

[realph]

I'm using Gulp + BrowserSync and I'm trying to reload my development website when changes are made to my HTML files, but I can't seem to get it working.

I'm getting no errors in the command line, my page seems to reload but the changes I've made don't appear in the browser, unless I quit the gulp task and run it again.

This is my current setup:

    var gulp = require('gulp');
    var browserify = require('browserify');
    var swig = require('gulp-swig');
    var browserSync = require('browser-sync');
    var reload = browserSync.reload;

    gulp.task('serve', function () {
      browserSync({
        server: {
          baseDir: './Build'
        }
      });
    });

    gulp.task('templates', function() {
      return gulp.src('./src/*.html')
        .pipe(swig())
        .pipe(gulp.dest('./Build'))
        .pipe(reload({stream: true}))
    });

    // Default task
    gulp.task('default', ['serve', 'templates', 'sass', 'js'], function() {
      gulp.watch('./src/*.html', ['templates']);
      gulp.watch(['./src/scss/*.scss', './src/scss/**/*.scss'], ['sass']);
      gulp.watch('./src/js/*.js', ['js']);
    });

Any help with this is appreciated. Thanks in advance!

[shakyShane]

I created a recipe off the back of this question - first of all to prove my setup works, but also so other can benefit from it.

https://github.com/BrowserSync/recipes/tree/master/recipes/gulp.swig

Check it out :)

[realph]

@shakyShane I'm getting a Cannot GET / when trying to run that. Any reason my code above isn't working? Not sure what I'm doing wrong...

[shinnn]

@realph Could you show us the complete error log?

[shakyShane]

Are the html files being written to your build directory?

[realph]

@shinnn I'm not getting an error. My HTML files are being written to my /Build directory on the initial run of gulp, but they're not being written on subsequent changes, even though I'm watching that directory.

[shinnn]

@realph Can you create a small repository that can reproduce the error you've run into?

[realph]

@shinnn Got the repo here. https://github.com/realph/gulp-zero

[shinnn]

@realph OK, I confirmed and solved the problem. It's not related to browser-sync itself.

Disable swig's cache option like below and the page will be updated whenever you edit the HTML.

gulp.task('templates', function() {
  return gulp.src('./src/*.html')
    .pipe(swig({
      defaults: {
        cache: false
      }
    }))
    .pipe(gulp.dest('./Build'))
    .pipe(reload({stream: true}))
});

@shakyShane We should update the swig recipe, too.

[realph]

@shinnn Ahh, perfect! Thanks a lot. Should have probably had a look at the swig docs. Thanks again for all your help!