僅重新生成正在重新載入的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幾個插件...

但不知道如何，因爲我在我的styles.scss文件和//= include使用@import，使與gulp-include這些工作我的主script.js文件來連接這些特定的文件。

Answer 1

需要插件僅修改過的文件，以livereload，所以使用它像下面......

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

知道通過瀏覽器或角度的模板完成緩存的模板緩存，你就需要另一個插件解決這個問題...

link to gulp-changed docs