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是作为一个自动化控制的最主要的特性,也是提高我们工作效率的重要助手,应该多写一些例子来锻炼一下。

results matching ""

    No results matching ""