如何让BrowserSync在我的Gulp4配置中正常运行？

你的代码里有几个关键问题导致BrowserSync没效果，下面是一步步的修复方案：

1. 统一模块导入方式 #

你混合使用了ES模块（import）和CommonJS（require），容易引发兼容性问题，把BrowserSync的导入改成ES模块风格：

// 替换原来的require语句
import browserSync from 'browser-sync';
const bs = browserSync.create(); // 创建BrowserSync实例

2. 移除不必要的async关键字 #

所有gulp任务里的async都要删掉——Gulp的流任务本身就是异步的，加async会导致任务在流处理完成前提前结束，BrowserSync无法正确触发。比如修改imagemin任务：

gulp.task('imagemin', () => {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/assets/img'))
})

同理，fileinclude、sass、watch任务里的async全部移除，同时确保每个流任务都通过return返回，让Gulp能跟踪任务完成状态。

3. 注册BrowserSync任务并在watch中启动 #

你定义了browsersync函数，但没把它注册成Gulp任务，也没在watch时启动服务。先注册任务：

function browsersync() {
  bs.init({
    server: {
      baseDir: 'dist/',
    },
    ghostMode: { clicks: false },
    notify: false,
    online: true,
  })
}

// 注册成Gulp任务
gulp.task('browsersync', browsersync);

然后修改watch任务，让它先执行编译、文件合并、图片优化的前置任务，再启动BrowserSync，最后监听文件变化：

gulp.task('watch', gulp.series(
  // 并行执行所有构建任务
  gulp.parallel('sass', 'fileinclude', 'imagemin'),
  'browsersync',
  (done) => {
    // 监听Sass文件变化，编译后热重载样式
    gulp.watch('src/sass/**/*.scss', gulp.series('sass'));
    // 监听HTML文件变化，合并后刷新页面
    gulp.watch('src/views/**/*.html', gulp.series('fileinclude')).on('change', bs.reload);
    // 监听图片变化，优化后刷新页面
    gulp.watch('src/images/*', gulp.series('imagemin')).on('change', bs.reload);
    done();
  }
));

4. 修正Sass任务的BrowserSync触发 #

保留bs.stream()实现CSS热重载（无需刷新整个页面），Sass任务调整为：

gulp.task('sass', () => {
  return gulp.src('src/sass/**/*.scss', { sourcemaps: true })
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('dist/assets/css', { sourcemaps: '../sourcemaps/' }))
    .pipe(bs.stream())
})

最终完整的gulpfile.js #

import gulp from 'gulp'
import browserSync from 'browser-sync'
import imagemin from 'gulp-imagemin'
import fileinclude from 'gulp-file-include'
import dartSass from 'sass'
import gulpSass from 'gulp-sass'

const sass = gulpSass(dartSass)
const bs = browserSync.create();

// 启动BrowserSync服务
function browsersync() {
  bs.init({
    server: {
      baseDir: 'dist/',
    },
    ghostMode: { clicks: false },
    notify: false,
    online: true,
  })
}

// 图片优化任务
gulp.task('imagemin', () => {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/assets/img'))
})

// HTML文件合并任务
gulp.task('fileinclude', () => {
  return gulp.src(['src/views/**/*.html', '!src/views/**/_*.html'])
    .pipe(fileinclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(gulp.dest('dist'));
});

// Sass编译任务
gulp.task('sass', () => {
  return gulp.src('src/sass/**/*.scss', { sourcemaps: true })
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('dist/assets/css', { sourcemaps: '../sourcemaps/' }))
    .pipe(bs.stream())
})

// 默认任务
gulp.task('default', () => {
  return console.log('Gulp is running...')
}) 

// 监听任务
gulp.task('watch', gulp.series(
  gulp.parallel('sass', 'fileinclude', 'imagemin'),
  'browsersync',
  (done) => {
    gulp.watch('src/sass/**/*.scss', gulp.series('sass'));
    gulp.watch('src/views/**/*.html', gulp.series('fileinclude')).on('change', bs.reload);
    gulp.watch('src/images/*', gulp.series('imagemin')).on('change', bs.reload);
    done();
  }
))

使用方法 #

运行gulp watch，Gulp会先完成所有构建任务，自动打开浏览器加载dist目录下的页面；之后修改Sass、HTML或图片时，浏览器会自动刷新或热重载样式。

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