快捷導(dǎo)航

使用GruntJS構(gòu)建Web程序之Tasks（任務(wù)）篇

更新時(shí)間：2014年06月06日 11:10:43 作者：

任務(wù)（Tasks）是grunt的核心概念，你所做的很多工作比如資源合并（concat）、壓縮（uglify）都是在配置任務(wù)。每次grunt運(yùn)行的時(shí)候，你指定的一個(gè)或多個(gè)任務(wù)也在運(yùn)行，如果你沒有指定任務(wù)，那么一個(gè)默認(rèn)名為“default”的任務(wù)將自動(dòng)運(yùn)行。

如何自定義Grunt任務(wù)

有時(shí)我們需要寫一些自己的grunt任務(wù)，下面是一個(gè)具體例子

一、準(zhǔn)備

1. 新建一個(gè)目錄g1
2. 新建package.json，放入g1
3. 新建Gruntfile.js，放入g1

package.json

復(fù)制代碼代碼如下:

 
{
    "name": "g1",
    "version": "0.1.0",
    "author": "@snandy",
    "homepage": "http://www.g1.com",
    "devDependencies": {
        "grunt": "~0.4.0"
    }
}

4. cd進(jìn)入g1，npm install安裝grunt包

這整個(gè)目錄結(jié)構(gòu)如下

Gruntfile.js暫時(shí)空著。

二、創(chuàng)建一個(gè)最簡單的任務(wù)

grunt.registerTask(taskName, [description,] taskFunction)

taskName 任務(wù)名稱，命令行里使用 grunt + taskName
description 任務(wù)的描述
taskFunction 任務(wù)的實(shí)現(xiàn)

Gruntfile.js里填入一下代碼

復(fù)制代碼代碼如下:

 
module.exports = function(grunt) {
    grunt.registerTask('mytask', '一個(gè)最簡單的任務(wù)演示，根據(jù)參數(shù)打印不同的輸出.', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln('任務(wù)' + this.name + ", 沒有傳參數(shù)");
        } else if (arguments.length === 1) {
            grunt.log.writeln('任務(wù)' + this.name + ", 有一個(gè)參數(shù)是" + arg1);
        } else {
            grunt.log.writeln('任務(wù)' + this.name + ", 有兩個(gè)參數(shù)分別是" + arg1 + ", " + arg2);
        }
    });
};

注冊了一個(gè)任務(wù)“mytask”，實(shí)現(xiàn)一個(gè)最簡單的根據(jù)所傳參數(shù)不同實(shí)現(xiàn)不同的打印輸出，看運(yùn)行結(jié)果我們需要進(jìn)入命令行。

進(jìn)入到g1目錄，輸入 grunt mytask

再輸入 grunt mytask:snandy

任務(wù)名后面加一個(gè)冒號(hào)就可以傳參了

再輸入 grunt mytask:snandy:backus

冒號(hào)間隔可以傳多個(gè)參數(shù)

三、一次創(chuàng)建多個(gè)任務(wù)

grunt.registerMultiTask(taskName, [description,] taskFunction)

可以看到參數(shù)是一樣的，方法名不同。但使用方式卻不太同，需要先初始化config，Gruntfile.js如下

復(fù)制代碼代碼如下:

 
module.exports = function(grunt) {
    grunt.initConfig({
        log: {
            t1: [1, 2, 3],
            t2: 'hello world',
            t3: false
        }
    });

    grunt.registerMultiTask('log', 'Log stuff.', function() {
        grunt.log.writeln(this.target + ': ' + this.data);
    });
};

進(jìn)入g1目錄，分別測試下

輸入 grunt，會(huì)依次執(zhí)行三個(gè)子任務(wù)t1,t2,t3

分別輸入 grunt log:t1, grunt log:t2, grunt log:t3

四、任務(wù)間通訊

在一個(gè)任務(wù)內(nèi)部可以調(diào)用另外一個(gè)任務(wù)，如下

復(fù)制代碼代碼如下:

 
module.exports = function(grunt) {

    grunt.registerTask('mytask', '一個(gè)最簡單的任務(wù)演示，根據(jù)參數(shù)打印不同的輸出.', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln('任務(wù)' + this.name + ", 沒有傳參數(shù)");
        } else if (arguments.length === 1) {
            grunt.log.writeln('任務(wù)' + this.name + ", 有一個(gè)參數(shù)是" + arg1);
        } else {
            grunt.log.writeln('任務(wù)' + this.name + ", 有兩個(gè)參數(shù)分別是" + arg1 + ", " + arg2);
        }
    });

    grunt.registerTask('default', '默認(rèn)的任務(wù)', function() {
        // 調(diào)用mytask
        grunt.task.run('mytask:param1:param2')
    })
};

進(jìn)入命令行，輸入grunt

調(diào)用多個(gè)任務(wù)，以逗號(hào)分隔傳給run方法即可，或者以數(shù)組形式

復(fù)制代碼代碼如下:

grunt.registerTask('default', '默認(rèn)的任務(wù)', function() {
    grunt.task.run('mytask1', 'mytask2')
    // 或者
    grunt.task.run(['mytask1', 'mytask2'])   
})

您可能感興趣的文章: