使用Gulp+Browsersync启动时显示空白页，刷新或修改后正常求解

嗨，这个问题我之前也碰到过！其实核心原因大概率是BrowserSync启动得太早了，你的资源还没编译好，浏览器打开的时候自然找不到内容，就显示空白了。下面给你几个具体的排查和修复方向：

1. 调整任务执行顺序，先编译再启动BrowserSync #

Gulp 默认是并行执行任务的，如果你的默认任务同时启动了 BrowserSync 和编译任务（比如 Sass 编译），很可能 BrowserSync 在资源还没生成完就先启动了，导致初始页面找不到 CSS/JS 等资源。

如果是 Gulp 4+，直接用 gulp.series 让任务串行执行：

// 先执行sass编译，再启动BrowserSync，最后开启监听
gulp.task('default', gulp.series('sass', 'browserSync', 'watch'));

如果是 Gulp 3，需要先安装 run-sequence 依赖，然后这样写：

var runSequence = require('run-sequence');

gulp.task('default', function(callback) {
  runSequence('sass', 'browserSync', 'watch', callback);
});

2. 确保BrowserSync配置了正确的根目录和入口文件 #

检查你的 BrowserSync 初始化配置，确认 baseDir 指向了你的项目根目录（比如源文件所在的 app 目录，或者编译后的 dist 目录），并且明确指定入口文件：

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app', // 替换成你的实际项目根目录
      index: 'index.html' // 明确指定入口文件，避免浏览器找不到默认页
    },
  })
});

如果 baseDir 配置错误，BrowserSync 找不到你的 index.html，自然会显示空白页。

3. 在编译任务完成后触发BrowserSync重载（可选但保险） #

在你的 Sass/JS 编译任务末尾加上 browserSync.reload，确保编译完成后立即通知浏览器更新，哪怕初始启动时也能同步最新资源：

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true // 流式重载，不用刷新整个页面
    }))
});

4. 确认监听任务覆盖了所有关键文件 #

检查你的 watch 任务，确保监听了 HTML、CSS、JS 等文件的变化，这样修改文件时能及时触发重载：

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', gulp.series('sass')); // Gulp4用series，Gulp3直接写['sass']
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload); 
})

按照上面的步骤调整后，再运行默认任务，BrowserSync 会等资源编译完成后再启动，初始页面就能正常显示内容了。

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