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  directories, copied  files

Done, without errors.

Execution Time (-- :: UTC)

loading tasks   3ms  ██████ %

copy:test      22ms  █████████████████████████████

███████████ %

Total 26ms

Completed in .309s at Tue Jan   :: GMT+ (台北標準時間) - 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  directories, copied  files

Running "watch" task

Completed in .043s at Tue Jan   :: GMT+ (台北標準時間) - 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 .017s at Tue Jan   :: GMT+ (台北標準時間) - 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系列的最后一篇了。

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

相关文章

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