grunt之watch续

时间 2019-11-08

标签 grunt watch 栏目 Node.js 繁體版

原文原文链接

　　上一回没有说完，我就是这样，作以前心中波澜壮阔，锦绣山河，等画完小草开始烦躁，完成鲜花出现动摇，而后心神涣散，最后有始无终。html

　　如今弥补下以前遗漏的问题。node

　　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后，源文件夹下每有文件的变更，就会将全部文件复制到目标文件夹。git

开始介绍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，打印出来的内容以下github
```
task name: default
Running "watch" task
Waiting...
```
而后修改源文件夹下的内容，接下来显示的内容以下api
```
>> 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，打印出来的内容grunt

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的设定，在本进程从新执行了原来的命令。ui

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看文档的习惯。spa

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