onChange事件添加到观看方法

Question

我从手表的方法，你可以添加两个事件browsersync docs见

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

什么是两者之间的区别？是不是watch自动链接到任何改变事件？

谢谢

Answer 1

正确答案

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

指示一饮而尽运行sass上的文件选择的子集检测到每一次变化定义的任务。如果你没有通过任何options，默认情况下它会监视add，change，unlink事件。

在上面的代码中，任意添加，删除或*.scss目录下的文件app/scss变化将导致sass任务要执行。

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

由于gulp.watch() returns一个chokidar比如，你可以通过使用.on('event', eventHandler)法（examples）微调你会响应事件。

这意味着，在这个例子中browserSync.reload将只如果任何*.html文件app/目录已经更改调用。在添加新文件或删除现有的情况下，也不会重新加载浏览器。

旧的答案，可能不是真正的帮助

基本上，每个gulp.watch()是看在不同的地方/文件中的更改，这就是为什么有两个人（例如，防止跑SASS编译器对HTML文件）。

第一个是检查是否有任何*.scss文件已更改，然后运行将处理改变SCSS文件到CSS一饮而尽任务sass。这项任务与gulp.task('sass', function() {/* code from example */})定义。

二是检查任何.html文件改变，当它改变时，它运行的回调函数browserSync.reload反映在浏览器中的变化。