如何让Gulp同时写入所有文件？避免LiveReload多次浏览器重载

问题的核心是live-server会监听dist目录的每一次文件写入，而Gulp默认是处理完一个文件就写入一个，所以会触发多次重载。我们可以改用gulp-livereload插件，让它在所有Pug文件编译完成后再一次性触发浏览器重载，而不是依赖live-server的自动监听。

步骤如下：

1. 首先安装插件：

npm install gulp-livereload --save-dev

2. 修改你的Gulpfile：

const gulp = require('gulp');
const pug = require('gulp-pug');
const livereload = require('gulp-livereload'); // 引入插件

// 修改编译任务，所有文件处理完后触发livereload
gulp.task('processMarkup', function(){
  return gulp.src('src/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('./dist/'))
    .pipe(livereload()); // 所有文件写入完成后发送重载信号
});

// 修改监听任务，启动livereload服务器并监听文件
gulp.task('watch-markup', function(){
  livereload.listen(); // 启动livereload服务器
  gulp.watch(['./src/**/*.pug'], gulp.series('processMarkup'));
});

3. 启动方式：
   现在你不需要依赖live-server的默认监听了，直接启动Gulp的watch任务，然后在浏览器中安装livereload扩展（比如Chrome的LiveReload插件），打开dist目录下的页面后启用插件即可。这样每次编译完成只会触发一次重载。

如果你不想更换livereload的方式，也可以直接给live-server添加--wait参数，让它等待一段固定时间再触发重载，这样短时间内的多个文件变化会被合并成一次。

比如修改你启动live-server的命令：

live-server dist/ --wait=500

这里的500是毫秒数，你可以根据自己的编译耗时调整（比如设为600或1000），这样当5个Pug文件在2-5秒内完成写入时，live-server会等待500毫秒，确认没有新的文件变化后再触发一次重载，避免多次刷新。

如果你的项目文件越来越多，每次都编译所有Pug文件会浪费时间，可以搭配gulp-changed插件，只编译修改过的文件，进一步减少编译时间和重载次数：

1. 安装插件：

npm install gulp-changed --save-dev

2. 修改编译任务：

const changed = require('gulp-changed');

gulp.task('processMarkup', function(){
  return gulp.src('src/*.pug')
    .pipe(changed('./dist/', { extension: '.html' })) // 只处理变化过的文件
    .pipe(pug())
    .pipe(gulp.dest('./dist/'))
    .pipe(livereload());
});

这样只有修改过的Pug文件会被编译，既节省时间，也减少了文件写入次数，自然也不会触发多次重载。

内容的提问来源于stack exchange，提问作者user10908202