Only livereload HTML pages that have changed

Question

I've setup as outlined below. Everything is working and when I edit an HTML page, gulp triggers the livereload in Chrome.

However, I noticed it's reloading every single html page. How can I set it so it only reloads the page that has changed?

// --------------------------------------------------------------
// HTML
//---------------------------------------------------------------

gulp.task('html', function() {
    gulp.src('./_themes/blank/**/*.html')
        .pipe(livereload());
});


// --------------------------------------------------------------
// Watch
//---------------------------------------------------------------

gulp.task('watch', function() {

    gulp.watch('./_themes/blank/ui/scss/*.scss', ['styles']);
    gulp.watch('./_themes/blank/js/*.js', ['scripts']);
    gulp.watch('./_themes/blank/**/*.html', ['html']);

});

gulp.task('default', ['styles', 'watch']);
gulp.task('default', ['scripts', 'watch']);
gulp.task('default', ['html', 'watch']);

livereload.listen();

I can see that there are a few plugins like gulp-newer and gulp-changed...

But not sure how to make these work with gulp-include as I'm using @import in my styles.scss file and //= include in my main script.js file to concatenate those specific files.

Answer 1

you need to plugin only changed files to livereload, so use it like below...

gulp.task('html', function() {
    gulp.src('./_themes/blank/**/*.html')
        .pipe(changed('.'))
        .pipe(livereload());
});

be aware of template caching done by browser or in angular's template-cache, you would need another plugin to solve that issue...

link to gulp-changed docs