Browsersync仅二次保存才生效问题求助及Gulp配置排查

Hey 👋，我来帮你排查这个Browsersync的同步异常问题。看了你的Gulp配置，有几个关键问题导致了"第二次保存才同步"的现象，咱们一步步来修复：

一、配置里的核心问题及修复方案 #

1. HTML编译任务的刷新方式用错了 #

你的pug任务里用了browserSync.reload({ stream: true })，但stream: true是专门给CSS文件做注入式刷新的（不用整页刷新，直接替换CSS内容）。对于HTML文件，我们需要触发整页刷新，直接调用browserSync.reload()就好。

当你新增第三个页面文件时，错误的刷新方式会让Browsersync无法正确识别新文件的生成——第一次保存只完成了文件编译，却没触发目录或页面的刷新；第二次保存时，重复的文件变化事件才让Browsersync"反应过来"完成同步。

修改后的pug任务：

// pug to html
gulp.task('pug', function buildHTML() {
  return gulp.src('src/pug/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('build/'))
    .pipe(browserSync.reload()); // 去掉 { stream: true }
});

2. JS任务缺失自动刷新逻辑 #

你的scripts任务编译完成后没有触发Browsersync刷新，这会导致JS文件修改后无法自动同步到浏览器。虽然这不是你当前的核心问题，但也是配置的遗漏，建议补上：

// js concat and minify
gulp.task('scripts', function() {
  return gulp.src(['src/js/jquery-3.0.0.min.js', 'src/js/jquery-migrate-1.4.1.min.js', 'src/js/swiper.min.js', 'src/js/jquery.photoswipe-global.js', 'src/js/custom.js'])
    .pipe(concat('main.min.js'))
    //.pipe(uglify())
    .pipe(gulp.dest('build/js/'))
    .pipe(browserSync.reload()); // 新增这一行，触发JS修改后的刷新
});

3. 优化目录监听（可选但推荐） #

因为你开启了directory: true让Browsersync显示目录列表，当新增/删除文件时，可能需要让Browsersync监听build目录本身的变化，确保目录列表能实时更新。可以在watch任务里新增这一行：

// watcher
gulp.task('watch', ['browserSync', 'sass', 'pug', 'scripts'], function(){
  gulp.watch('src/scss/**/*.scss', ['sass']);
  gulp.watch('src/pug/**/*.pug', ['pug']);
  gulp.watch('src/js/**/*.js', ['scripts']);
  // 新增：监听build目录的所有变化，确保文件增删时同步目录列表
  gulp.watch('build/**/*', browserSync.reload);
})

二、为什么会出现"二次保存才同步"的现象？ #

当你新增第三个页面文件时，第一次保存触发Pug编译生成了新的HTML文件，但因为用了stream: true这种CSS专属的刷新方式，Browsersync没有扫描目录变化，自然不知道有新文件生成。第二次保存时，重复的文件修改事件触发了Browsersync的全量检查，这才识别到新文件并完成浏览器同步。

按照上面的修改调整后，应该就能解决这个异常问题了！

内容的提问来源于stack exchange，提问作者Денис Шпитальный