Question

这是我目前的gulpfile.js观察列表

// Gulp watchlist
gulp.task('watch', ['browserSync', 'sass'], function(){
    gulp.watch('app/scss/**/*.scss', ['sass']);
    gulp.watch('app/*.html').on('change', browserSync.reload);
    gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
    //add more watchers here
});

这是有效的。

但是我关注的教程略有不同：

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Reloads the browser whenever HTML or JS files change
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload); 
});

我需要.on（'更改'，browserSync.reload）吗？有用;我只是好奇我的工作是不是很好的做法。谢谢！

Answer 1

Gulp watch始终返回发出更改事件的EventEmitter，因此调用gulp.watch('app/*.html').on('change', browserSync.reload)可以写为：

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

可以使用以下参数调用

watch函数： gulp.watch(glob [, opts], tasks)或gulp.watch(glob [, opts, cb])。

因此，您可以使用这两种变体，但更短的方法更可取。

Answer 2

不，您无需添加自定义on('change')。在初始化观察器时应该像教程一样传递事件处理程序。否则，它有点像告诉gulp默认情况下不做任何更改，然后添加你的监听器。

另一个优点是，如果您的处理程序是gulp任务本身gulp.watch(..., ['task1', 'task2'])而不是链接on('change', task1Function).on('change', task2Function)

，您可以一次性传入多个事件处理程序

Gulpfile.js观看最佳实践

2 个答案: