onChange 事件添加到 watch 方法答案

【问题标题】：onChange event added to watch methodonChange 事件添加到 watch 方法
【发布时间】：2015-10-16 00:26:22
【问题描述】：

我从browsersync docs看到，在watch方法上可以添加两个事件

gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);

这两者有什么区别？ watch 不是自动链接到任何更改事件吗？

谢谢

【问题讨论】：

【解决方案1】：

正确答案

gulp.watch("app/scss/*.scss", ['sass']);

每次在选定的文件子集上检测到更改时，指示 gulp 运行定义的任务 sass。如果您还没有通过任何options，默认情况下它将监视add、change、unlink 事件。

在上面的代码中，对app/scss目录下的*.scss文件的任何添加、删除或更改都会导致sass任务被执行。

gulp.watch("app/*.html").on('change', browserSync.reload);

由于gulp.watch() returns 是chokidar 实例，您可以使用.on('event', eventHandler) 方法(examples) 微调您将要响应的事件。

这意味着，在此示例中，browserSync.reload 将仅在 app/ 目录中的任何 *.html 文件发生更改时调用。在添加新文件或删除现有文件的情况下，它不会重新加载浏览器。

旧答案，可能没什么帮助

基本上，每个gulp.watch() 都在监视不同位置/文件的变化，这就是为什么会有两个（例如，为了防止针对 html 文件运行 sass 编译器）。

第一个是检查是否有任何*.scss 文件已更改，然后运行 gulp 任务sass 将更改的 scss 文件处理为 css。该任务定义为 gulp.task('sass', function() {/* code from example */})。

第二个是检查任何.html文件的变化，当它发生变化时，它会运行回调函数browserSync.reload来反映浏览器的变化。

【讨论】：

您刚刚解释了很明显的代码。 OP 询问为什么 gulp 有两种处理更改的方式（通过另一个任务和通过 change 事件），并询问这两种处理更改的方式有什么区别，不管如何处理更改。
@Unicornist - 更新了答案。发布三年多后，您是如何设法将其挖掘出来的？:)
太棒了！刚刚遇到了与 OP 相同的问题。