How to make gulp write all files simultaneously?

Question

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.

Have you tried using browserSync? It's reload can be triggered in series, so that it only reloads once after the `processMarkup` task completes. — Sean, Mar 09 '19 at 13:04

score 0 · Accepted Answer · answered Mar 10 '19 at 10:30

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.

How to make gulp write all files simultaneously?

1 Answers1