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


Posted in Javascript onJune 06, 2014

如何自定义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'])   
})
Javascript 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
JS解析XML实例分析
Jan 30 Javascript
javascript实现Table排序的方法
May 15 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
vue动态绑定style样式
Apr 20 Vue.js
javascript中加号(+)操作符的一些神奇作用
Jun 06 #Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 #Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 #Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 #Javascript
Node.js中对通用模块的封装方法
Jun 06 #Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 #Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 #Javascript
You might like
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
一道SQL面试题
2012/12/31 面试题
综合办公室主任职责
2013/12/16 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
新学期校长寄语
2014/01/18 职场文书
简历的自我评价范文
2014/02/04 职场文书
初三学习计划书范文
2014/04/30 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
代办社保委托书范文
2014/10/06 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
golang 实现并发求和
2021/05/08 Golang
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技