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.

harishr · Answer 1 · 2015-06-28T15:43:42.497

0

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

edited Jun 28 '15 at 15:43

answered Jun 28 '15 at 14:51

harishr

17,807
9
78
125

Thanks for your response. I installed gulp-changed locally and then tried the above. Sadly, it's still not working. It's asking me for a destination for the files, but even when I add one keeps asking. How can I set the destination to the same as the source? As they're not being compiled or anything, it's the just plain html... ? ```[16:31:04] Starting 'html'... [16:31:04] 'html' errored after 8.37 ms [16:31:04] Error in plugin 'gulp-changed' Message: dest required ^C``` – jx3 Jun 28 '15 at 15:37
just add `'.'` as dest. edited the answer, also given gulp-changed docs link – harishr Jun 28 '15 at 15:43
OK, that fixed that problem... But gulp is still reloading all of the html files :( – jx3 Jun 28 '15 at 17:47
gulp-changed do provide custom compare function, you can write your custom logic to compare not on basis of time but may be on basis of filesize or md5 hash – harishr Jun 30 '15 at 12:25

Only livereload HTML pages that have changed

1 Answers1