gulp.watch
监视文件,并且可以在文件发生改动时候做一些事情。 它总会返回一个 EventEmitter 来发射(emit) change 事件。
用法
gulp.watch(glob [, opts], tasks)
gulp.watch(glob [, opts, cb])
它有两种用法,下面分开讲解。
gulp.watch(glob[, opts], tasks)
监听(单个或多个)文件的变动,一旦有变,就执行规定的task,这些task是通过gulp.task注册的。
glob
描述:要监听的文件。
类型: String or Array
一个 glob 字符串,或者一个包含多个 glob 字符串的数组,用来指定具体监控哪些文件的变动。
opts
类型: Object
传给gaze的参数。 什么是gaze呢?这个项目已经被原作者删掉了,我通过其他的一些资料了解到,它其实是一个监听文件变动的模块,gulp应该也是使用了这个包。
从使用上看,我还没有看到怎么用opts这个参数,好像大部分情况都不会用到。我感觉应该是指在什么情况下才执行tasks,比如只有在文件被删除的情况下执行task,或者在文件被修改或删除的时候执行。总之我感觉这个opts是用来填写下面的event.type的。
tasks
描述:要执行的任务列表
类型: Array
需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字,
gulp.watch('js/**/*.js', ['uglify','reload']);
上面这个动作会监听js目录下的js脚本的变动,一旦变动了,就会执行uglify, reload这两个任务。
gulp.watch(glob[, opts, callback])
监听(单个或多个)文件的变动,一旦有变,就执行callback这个回调函数。
glob
描述:要监听的文件。
类型: String or Array
一个 glob 字符串,或者一个包含多个 glob 字符串的数组,用来指定具体监控哪些文件的变动。
opts
类型: Object
传给 gaze 的参数。
callback(event)
描述:文件变动时要执行的回调函数。
类型: Function
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动:
event.type
类型: String
发生的变动的类型:added, changed 或者 deleted。
event.path
类型: String
触发了该事件的文件的路径。
gulp.watch的返回值
gulp.watch的返回值是一个可以被监听的发射器,什么叫“可以被监听”,就是可以用on去挂载监听事件的回调函数,例如:
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
回调函数会在change事件的末尾执行。回调函数的event和上面的event是一样的。实际上,我们采用gulp.watch(files,function(e){})
和用on再去挂载是差不多的。
gulp.watch是作为一个自动化控制的最主要的特性,也是提高我们工作效率的重要助手,应该多写一些例子来锻炼一下。