Gulpfile.js 观看最佳实践

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('change', browserSync.reload) 吗？有用;我只是很好奇我在做什么不是很好的做法。谢谢！

Answer 1

Gulp watch总是returns一个发出变化事件的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 观看最佳实践

Gulpfile.js watch best practice

javascript

gulp

gulp-sass

gulp-watch