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文件中使用@import并在我的主script.js文件中使用styles.scss时，如何使这些工作与//= include一起使用连接这些特定文件。

Answer 1

您只需要将已更改的文件插入livereload，因此请使用如下所示...

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

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

link to gulp-changed docs

仅实时重载已更改的HTML页面

1 个答案: