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...