为何Gulp监听任务一种写法生效，另一种写法失效？

这问题核心是没摸透Gulp v3版本中gulp.watch()的API参数规则，咱们来拆解清楚：

先明确Gulp v3中gulp.watch()的正确参数结构 #

它的标准调用方式有三种：

// 方式1：监听文件，变化时执行指定任务
gulp.watch(文件路径数组/字符串, [要执行的任务数组]);
// 方式2：监听文件，绑定自定义change事件
gulp.watch(文件路径数组/字符串).on('change', 事件处理函数);
// 方式3：带配置参数的写法
gulp.watch(文件路径数组/字符串, 配置对象, [要执行的任务数组]);

划重点：第三个参数如果存在，必须是配置对象（比如{delay: 500}这种控制监听行为的配置），绝对不能是文件路径数组或者任务数组。

分析你的两种写法 #

正确写法的逻辑合理性

你的第一种写法完全贴合API规则：

gulp.task("watch", ["browser-sync"], function() {
 // 监听scss文件，变化时自动执行sass编译任务
 gulp.watch( ["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"] );
 // 单独监听html文件，变化时触发浏览器重载
 gulp.watch("src/*.html").on("change", browserSync.reload);
});

这里是两个独立的gulp.watch调用，分别对应两组文件和各自的处理逻辑，Gulp能清晰识别每一步的意图，自然能正常运行。

错误写法的核心问题

第二种写法犯了两个致命错误：

gulp.task("watch", ["browser-sync"], function() {
 gulp.watch( ["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"], ["src/*.html"] ).on("change", browserSync.reload);
});

1. 参数传递不符合规范：你把["src/*.html"]放在了第三个参数的位置，但这个位置只能接收配置对象，Gulp无法识别一个文件路径数组作为该参数，直接导致整个调用语法错误。
2. 逻辑设计误解：你试图让同一个gulp.watch调用同时处理两种不同文件的变化逻辑（scss执行编译任务、html触发浏览器重载），但Gulp的gulp.watch设计上是一组文件对应一套处理逻辑，不能这样混合传递不同的文件组和逻辑。

总结 #

如果想同时监听多组文件并执行不同逻辑，正确的做法就是像第一种写法那样，分开写多个gulp.watch调用，每组对应自己的文件路径和处理逻辑。

内容的提问来源于stack exchange，提问作者Thomas James Thorstensson