I have a gulp task that bulids all my pug templates (with includes):
gulp.task('processMarkup', function(){
return gulp.src('src/*.pug')
.pipe(pug())
.pipe(gulp.dest('./dist/'));
});
I also have a watcher that runs this task:
gulp.task('watch-markup',function(){
gulp.watch(['./src/**/*.pug'], gulp.series('processMarkup'));
});
Currently I have 5 pug templates inside my src/
and each time when pug writes files to dist/
(usually it takes 2-5s) my live-reload that observes dist/
triggers browser reloading so i need to watch through 5 browser reloads.
I think this can be prevented if all files saved simultaneously. How it can be achieved? (or if you have better solutions suggest them).
P.S. Live Reload that i use https://github.com/tapio/live-server.
According to the @Sean comment i made this config:
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'));
});
Now everything works properly.