仅livereload已更改的HTML页面

Question

我已经按照下面的描述进行了设置。一切正常，当我编辑HTML页面时，gulp会触发Chrome中的livereload。

然而，我注意到它正在重新加载每个单独的html页面。如何将其设置为仅重新加载已更改的页面？

// --------------------------------------------------------------
// 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();

我可以看到有一些像gulp-newer和gulp-changed这样的插件...

但是我不确定如何使用gulp-include，因为我在styles.scss文件中使用@import，在主script.js文件中使用//= include来连接这些特定文件。

Answer 1

你只需要把修改过的文件插入到livereload中，所以你可以像下面这样使用它…

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

要知道模板缓存是由浏览器或angular的模板缓存完成的，你需要另一个插件来解决这个问题……

link to gulp-changed docs