如何让 gulp 同时写入所有文件？答案

【问题标题】：How to make gulp write all files simultaneously?如何让 gulp 同时写入所有文件？
【发布时间】：2019-03-09 10:30:41
【问题描述】：

我有一个 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 个哈巴狗模板，每次哈巴狗将文件写入dist/（通常需要 2-5 秒）时，我的实时重新加载观察到dist/ 触发浏览器重新加载，所以我需要观看通过 5 次浏览器重新加载。

我认为如果同时保存所有文件，则可以避免这种情况。如何实现？（或者如果你有更好的解决方案建议他们）。

附：我使用 https://github.com/tapio/live-server 的 Live Reload。

【问题讨论】：

您尝试过使用 browserSync 吗？它的重载可以串联触发，所以它只在processMarkup任务完成后重载一次。

标签： gulp pug-loader

【解决方案1】：

根据@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'));
});

现在一切正常。

【讨论】：