Browsersync Gulp任务无法注入CSS，Watch任务在init后停滞

我之前在Homestead（Laravel的Ubuntu虚拟机）环境里也碰到过一模一样的问题，Browsersync能检测到文件变化但就是不执行打包任务，也不注入CSS。结合你的情况，给你几个针对性的排查和解决步骤：

1. 确保Gulp任务正确返回流（核心！） #

Gulp是基于流的构建工具，如果你的任务没有返回流，Gulp无法感知任务何时完成，watch流程就会卡住。检查你的cssInkject和依赖的CSS编译任务：

比如你的编译CSS任务应该这样写（要加return）：

gulp.task('compile-css', function() {
  // 必须return这个流，让Gulp追踪任务状态
  return gulp.src('resources/assets/styles/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('public/css'));
});

对应的cssInkject任务也要返回流，并且正确调用browserSync.stream()：

gulp.task('cssInkject', ['compile-css'], function() {
  return gulp.src('public/css/app.css') // 指向编译后的CSS文件
    .pipe(browserSync.stream()); // 注入到浏览器，无需刷新页面
});

2. 给BrowserSync添加轮询配置（解决虚拟机文件监听问题） #

Homestead的共享文件夹默认用的是Vagrant的同步机制，虚拟机里的文件系统事件（inotify）无法正确感知宿主机的文件变化。这时候需要给watch任务加上usePolling: true，让Gulp主动轮询文件状态：

gulp.task('watch', function() {
  browserSync.init({
    proxy: 'your-homestead-domain', // 比如你的本地域名：laravel.test
    watchOptions: {
      usePolling: true, // 关键配置，适配虚拟机共享文件夹
      interval: 1000 // 可选，轮询间隔（毫秒），根据需求调整
    }
  });

  // 确保watch的路径和任务关联正确
  gulp.watch('resources/assets/styles/**/*.css', ['cssInkject']);
  // 如果是SCSS，路径改成对应的scss文件：
  // gulp.watch('resources/assets/styles/**/*.scss', ['cssInkject']);
});

3. 检查任务依赖的顺序 #

确认cssInkject任务的依赖是否正确，比如它必须依赖编译CSS的任务，这样watch触发时会先执行编译，再执行注入。如果依赖写错或者缺失，也会导致任务不生效。

4. 测试虚拟机内的文件修改 #

可以直接在Homestead虚拟机里用命令行修改CSS/SCSS文件（比如vim resources/assets/styles/modules/_breadcrumbs.css），看看watch是否能触发任务。如果虚拟机内修改能触发，那问题出在宿主机到虚拟机的文件同步延迟，这时候可以考虑：

• 调整Vagrant的同步方式为NFS（Homestead配置文件里可以开启）
• 缩短usePolling的interval值，让轮询更频繁

按照这几个步骤排查，应该就能解决你的问题了。

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