菜单

运用GruntJS营造Web程序之Tasks(职分)篇

2019年7月28日 - Ajax

什么样自定义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”
    }
}

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

这一体目录结构如下

图片 1

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 + “, 有八个参数分别是”

注册了一个任务“mytask”,完结贰个最简易的基于所传参数分歧达成分裂的打字与印刷输出,看运维结果大家要求步入命令行。

进入到g1目录,输入 grunt mytask

图片 2

再输入 grunt mytask:snandy

图片 3

职分名背后加一个冒号就足以传参了

再输入 grunt mytask:snandy:backus

图片 4

冒号间隔能够传八个参数

三、一次创设多个职分

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

图片 5

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

图片 6

四、任务间通信

在两个任务之中能够调用别的三个义务,如下

复制代码 代码如下:

 
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 + “, 有五个参数分别是”

    grunt.registerTask(‘default’, ‘暗中认可的任务’, function() {
        // 调用mytask
        grunt.task.run(‘mytask:param1:param2’)
    })
};

跻身命令行,输入grunt

图片 7

调用多个任务,以逗号分隔传给run方法就能够,大概以数组格局

复制代码 代码如下:

grunt.registerTask(‘default’, ‘默许的天职’, function() {
    grunt.task.run(‘mytask1’, ‘mytask2’)
    // 或者
    grunt.task.run([‘mytask1’, ‘mytask2’])  
})

您大概感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图