Gulp+SASS+BrowserSync无法识别新建Partial，如何实现自动编译？

我来帮你搞定这个问题——你遇到的核心原因是Gulp 3.x 默认的 gulp.watch 无法监听新建的文件，它只会在启动时扫描已存在的文件，之后新增的文件不会被纳入监听范围。下面是具体的解决方案：

步骤1：安装 gulp-watch 插件 #

首先需要安装专门用于监听文件变化（包括新增文件）的插件：

npm install gulp-watch --save-dev

步骤2：修改Gulp配置代码 #

接下来调整你的配置，替换默认的 gulp.watch 为 gulp-watch：

先在顶部补充插件引入和缺失的变量定义：

// require plugins here
var watch = require('gulp-watch'); // 新增引入gulp-watch
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();

// 补充之前缺失的变量定义
var projectURL = '你的本地项目域名'; // 比如localhost:8080
var AUTOPREFIXER_BROWSERS = [
  'last 2 versions',
  '> 1%',
  'ie >= 9',
  'ios >= 7'
];

// Paths
var styleSRC = './assets/css/style.scss'; // Path to main .scss file.
var styleDestination = './'; // 去掉原路径里多余的空格
var styleWatchFiles = './assets/css/**/*.scss';

然后修改default任务里的监听逻辑：

// Watch
gulp.task('default', ['styles', 'browser-sync'], function () {
  // 替换默认gulp.watch为gulp-watch，实现监听新增文件
  watch(styleWatchFiles, function() {
    gulp.start('styles');
  });
});

为什么这样能解决问题？ #

gulp-watch 会持续扫描指定的文件路径，包括后续新建的Partial文件；而默认的 gulp.watch 只会在任务启动时创建一次文件监听列表，之后新增的文件不会被自动加入监听。替换后就能实现新建Partial时自动触发Sass编译了。

另外给你两个小提醒：

• 原配置里的 styleDestination 多了个空格，容易导致输出路径出错，已经帮你修正
• 之前代码里的 projectURL 和 AUTOPREFIXER_BROWSERS 变量未定义，运行时会报错，记得补充成你项目对应的配置

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