如何自定义Grunt任务

有时我们需要写一些自己的grunt任务,下面是一个具体例子

一、准备

1. 新建一个目录g1
2. 新建package.json,放入g1
3. 新建Gruntfile.js,放入g1

package.json

复制代码 代码如下: 
{
    "name": "g1",
    "version": "0.1.0",
    "author": "@snandy",
    "homepage": "http://www.g1.com",
    "devDependencies": {
        "grunt": "~0.4.0"
    }
}

4. cd进入g1,npm install安装grunt包

这整个目录结构如下

使用GruntJS构建Web程序之Tasks(任务)篇

Gruntfile.js暂时空着。

二、创建一个最简单的任务

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

taskName 任务名称,命令行里使用 grunt + taskName
description 任务的描述
taskFunction 任务的实现

Gruntfile.js里填入一下代码

复制代码 代码如下: 
module.exports = function(grunt) {
    grunt.registerTask('mytask', '一个最简单的任务演示,根据参数打印不同的输出.', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln('任务' + this.name + ", 没有传参数");
        } else if (arguments.length === 1) {
            grunt.log.writeln('任务' + this.name + ", 有一个参数是" + arg1);
        } else {
            grunt.log.writeln('任务' + this.name + ", 有两个参数分别是" + arg1 + ", " + arg2);
        }
    });
};

注册了一个任务“mytask”,实现一个最简单的根据所传参数不同实现不同的打印输出,看运行结果我们需要进入命令行。

进入到g1目录,输入 grunt mytask

使用GruntJS构建Web程序之Tasks(任务)篇

再输入 grunt mytask:snandy

使用GruntJS构建Web程序之Tasks(任务)篇

任务名后面加一个冒号就可以传参了

再输入 grunt mytask:snandy:backus

使用GruntJS构建Web程序之Tasks(任务)篇

冒号间隔可以传多个参数

三、一次创建多个任务

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

可以看到参数是一样的,方法名不同。但使用方式却不太同,需要先初始化config,Gruntfile.js如下

复制代码 代码如下: 
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);
    });
};

进入g1目录,分别测试下

输入 grunt,会依次执行三个子任务t1,t2,t3

使用GruntJS构建Web程序之Tasks(任务)篇

分别输入 grunt log:t1, grunt log:t2, grunt log:t3

使用GruntJS构建Web程序之Tasks(任务)篇


四、任务间通讯

在一个任务内部可以调用另外一个任务,如下

复制代码 代码如下: 
module.exports = function(grunt) {

    grunt.registerTask('mytask', '一个最简单的任务演示,根据参数打印不同的输出.', function(arg1, arg2) {
        if (arguments.length === 0) {
            grunt.log.writeln('任务' + this.name + ", 没有传参数");
        } else if (arguments.length === 1) {
            grunt.log.writeln('任务' + this.name + ", 有一个参数是" + arg1);
        } else {
            grunt.log.writeln('任务' + this.name + ", 有两个参数分别是" + arg1 + ", " + arg2);
        }
    });

    grunt.registerTask('default', '默认的任务', function() {
        // 调用mytask
        grunt.task.run('mytask:param1:param2')
    })
};

进入命令行,输入grunt

使用GruntJS构建Web程序之Tasks(任务)篇

调用多个任务,以逗号分隔传给run方法即可,或者以数组形式

复制代码 代码如下:
grunt.registerTask('default', '默认的任务', function() {
    grunt.task.run('mytask1', 'mytask2')
    // 或者
    grunt.task.run(['mytask1', 'mytask2'])  
})

标签:
GruntJS,Tasks,任务

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“使用GruntJS构建Web程序之Tasks(任务)篇”

暂无“使用GruntJS构建Web程序之Tasks(任务)篇”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?