我有一个gulp任务,构建我所有的哈巴狗模板(包含):
gulp.task('processMarkup', function(){
return gulp.src('src/*.pug')
.pipe(pug())
.pipe(gulp.dest('./dist/'));
});
我还有一个执行此任务的观察者:
gulp.task('watch-markup',function(){
gulp.watch(['./src/**/*.pug'], gulp.series('processMarkup'));
});
目前我在src/
中有5个pug模板,每次当pug将文件写入dist/
(通常需要2-5s)时,我的实时重载会观察dist/
触发浏览器重新加载,所以我需要通过5次浏览器重新加载来观看。
我认为如果同时保存所有文件,可以防止这种情况。如何实现? (或者如果你有更好的解决方案建议他们)。
附: Live Reload,我使用https://github.com/tapio/live-server。
根据@Sean评论我做了这个配置:
let gulp = require('gulp');
let pug = require('gulp-pug');
let browserSync = require('browser-sync');
gulp.task('reload', function(done) {
browserSync.reload();
done();
});
gulp.task('processMarkup', function() {
return gulp.src('src/*.pug')
.pipe(pug())
.pipe(gulp.dest('./dist/'));
});
gulp.task('serve', function() {
browserSync.init({
server: './dist/'
});
gulp.watch(['./src/**/*.pug'], gulp.series('processMarkup', 'reload'));
});
现在一切正常。