如何解决BrowserSync与gulp-watch配合失效的问题？

我正尝试配置gulpfile.js，实现SCSS转CSS、文件监听、实时重载功能。配置代码如下：

// Variables
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var source = './src';
var destination = './dist';
var browserSync = require('browser-sync');
// Server
gulp.task('browserSync', function(){
 browserSync.init({
 server: { baseDir: 'src' }
 })
});
// Task build : Scss -> Css
gulp.task('buildCss', function () {
 return gulp.src(source + '/assets/styles/*.scss')
 .pipe(plugins.sass())
 .pipe(plugins.cssbeautify({indent: ' '}))
 .pipe(plugins.autoprefixer())
 .pipe(gulp.dest(destination + '/assets/styles/'));
});
gulp.task('watch', function () {
 gulp.watch(source + '/assets/styles/*.scss', gulp.series('buildCss'));
});
gulp.task('startDev', gulp.series('browserSync', 'watch'));

起初CSS转换和监听功能运行正常，但添加BrowserSync后全部功能失效。执行startDev时会打开新标签页，推测服务器已启动，但后续无任何反应，请问问题可能出在哪里？

嘿，我来帮你排查下这个问题！从你的配置来看，主要有两个核心问题导致了功能失效：

1. BrowserSync的资源路径不匹配 #

你的browserSync任务把baseDir设为了src目录，但buildCss任务把编译后的CSS输出到了dist目录里。这就意味着浏览器从src目录加载页面时，根本找不到编译好的CSS文件——页面引用的大概率是dist里的CSS，而BrowserSync的服务器根本没指向这个目录。

解决办法：调整BrowserSync的配置，让它同时能访问src和dist目录，这样既可以加载src里的HTML，又能获取dist里的编译后资源：

gulp.task('browserSync', function(){
  browserSync.init({
    server: {
      baseDir: ['./src', './dist']
    }
  })
});

2. 编译CSS后未通知BrowserSync重载 #

你的watch任务只触发了buildCss，但编译完成后没有告诉BrowserSync去刷新页面，所以就算CSS编译好了，浏览器也不会更新。

你需要在buildCss任务最后加上browserSync.reload，或者在watch的回调里添加重载：

方案一：修改buildCss任务，编译后自动重载（推荐） #

这种方式只会刷新CSS资源，不用整页刷新，体验更好：

gulp.task('buildCss', function () {
  return gulp.src(source + '/assets/styles/*.scss')
    .pipe(plugins.sass())
    .pipe(plugins.cssbeautify({indent: ' '}))
    .pipe(plugins.autoprefixer())
    .pipe(gulp.dest(destination + '/assets/styles/'))
    .pipe(browserSync.stream()); // 添加流重载
});

方案二：修改watch任务，任务完成后整页刷新 #

如果你需要整页刷新，可以改成这样：

gulp.task('watch', function () {
  gulp.watch(source + '/assets/styles/*.scss', gulp.series('buildCss', function(done){
    browserSync.reload();
    done();
  }));
  // 额外建议：监听src里的HTML文件变化，自动刷新页面
  gulp.watch(source + '/*.html', browserSync.reload);
});

额外注意点 #

• 确认你已经安装了所有依赖：browser-sync、gulp-sass、gulp-cssbeautify、gulp-autoprefixer这些包都要确保安装正确，可以重新执行一次npm install核对。
• 检查你的HTML文件里引用的CSS路径是否正确，要指向dist/assets/styles/下的文件，而不是src里的SCSS文件。

把这些调整之后，重新运行gulp startDev，应该就能正常实现SCSS编译、监听和实时重载了！

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