grunt之watch续 | 易学教程

　　上一回没有说完，我就是这样，做之前心中波澜壮阔，锦绣山河，等画完小草开始烦躁，完成鲜花出现动摇，然后心神涣散，最后虎头蛇尾。

　　现在弥补下之前遗漏的问题。

　　watch(V0.6.1)的tasks和options(github地址)

watch和之前介绍的plugin有几点不同，首先files的值不是原来对象数组的形式，而是监听的文件的路径的字符串数组。
其次，其他plugin的task结构为target+options，watch多一个属性类型，叫tasks，是监听的文件变动后需要执行的任务队列。
目录结构还是参照之前，源文件夹是src，目标文件夹是dest，先做一个简单的实现。

'use strict';

module.exports = function(grunt) {
    
    require('load-grunt-tasks')(grunt);
    require('time-grunt')(grunt);
    
    var path = {
        src: 'src',
        dest: 'dest'
    }
    
    grunt.initConfig({
        path: path,
        copy: {
            test: {
                files: [
                    {
                        expand: true,
                        cwd: '<%=path.src%>/',
                        src: '{,*/}*',
                        dest: '<%=path.dest%>/'
                    }
                ]
            }
        },
        watch: {
            test: {
                tasks: [
                    'copy'
                ],
                files: '<%=path.src%>/{,*/}*'
            }
        }
    });
    
    grunt.registerTask('default', ['watch']);
}

执行grunt后，源文件夹下每有文件的变动，就会将所有文件复制到目标文件夹。

开始介绍options
spawn: 是否在子进程中执行tasks，默认为true。相当概念化的东东，换种方式理解。我们在module.exports = function(grunt) 函数的开头加上一句
```
console.log('task name: ' + (process.argv[2] || 'default'));
```
process的nodejs中的api，这句话是打印输入的命令的第二个字符串即执行的task。比如你执行grunt default，第二个字符串就是default，执行grunt，第二个字符串就是undefined。
再次执行grunt，打印出来的内容如下
```
task name: default
Running "watch" task
Waiting...
```
然后修改源文件夹下的内容，接下来显示的内容如下
```
>> File "src\index.html" changed.
task name: copy
Running "copy:test" (copy) task
Created 3 directories, copied 6 files

Done, without errors.


Execution Time (2015-01-27 09:52:52 UTC)
loading tasks   3ms  ██████ 12%
copy:test      22ms  █████████████████████████████
███████████ 85%
Total 26ms

Completed in 2.309s at Tue Jan 27 2015 17:52:52 GMT+0800 (台北標準時間) - Waitin
g...
```
又打印出了task name这一行，这意味着当设置此option为true时，每次执行watch中设置的task，都相当于在命令行再次输入grunt taskname。我们把此options设置为false，做同样的操作。
```
task name: default
Running "watch" task
Waiting...
>> File "src\index.html" changed.

Running "copy:test" (copy) task
Created 3 directories, copied 6 files

Running "watch" task
Completed in 0.043s at Tue Jan 27 2015 17:56:37 GMT+0800 (台北標準時間) - Waitin
g...
```
没有再次执行输出task name的代码。
所以，如果你的Gruntfile.js中读取了输入命令的部分值并保存为变量，请将此option设置为false，不然watch启动的task中将读取不到这些变量。
interrupt: 如果新的变动产生时之前watch启动的task还没执行完，是否中断执行，默认为false
debounceDelay: 文件变动产生event的最小时间间隔，默认为500ms
event: 触发监听器的文件变动event类型，可选参数'all'(default)、'changed'、'added'、'deleted'

reload: 是否重新执行之前执行的命令，一般用于监听Gruntfile.js的变动，默认为false，保持之前spawn的代码，为watch添加一个target

config: {
    options: {
        reload: true,
        spawn: false    //按之前spawn的设置将只会打印一次task name
    },
    files: 'Gruntfile.js'
}

执行grunt watch，然后修改Gruntfile.js，打印出来的内容

task name: watch
Running "watch" task
Waiting...

Reloading watch config...
task name: watch

Running "watch" task
Waiting...
>> File "Gruntfile.js" changed.

Running "watch" task
Completed in 0.017s at Tue Jan 27 2015 18:25:27 GMT+0800 (台北標準時間) - Waitin
g...

可见无视了spawn的设定，在本进程重新执行了原来的命令。

dateFormat: Function，默认就是上面打印出来的时间
atBegin: 是否在watch开启的时候执行一遍设定的tasks，默认false，样例中设置为true则执行grunt时会先进行一次copy
livereload: 前一节已经提到过了
cwd: 因为files不支持设置cwd，所以这里有个这样的option，和files中的功能一样
livereload: task执行错误的时候是否进行livereload操作，默认为true

　　至此常用的plugin基本介绍结束，当然还有jshint、htmlmin、imagemin等，github上的链接已经给出，相信看过之前介绍的plugin会养成一种上github看文档的习惯。

　　下一篇介绍下module.exports = function(grunt){}中传入参数grunt的api，应该也是grunt系列的最后一篇了。

来源：https://www.cnblogs.com/tarol/p/4253787.html

标签

watch