使用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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
JavaScript变量声明详解
Nov 27 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
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
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
js继承实现方法详解
2016/12/16 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
详解Python中的静态方法与类成员方法
2017/02/28 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
银河香水:Galaxy Perfume
2019/03/25 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
股权转让协议书
2014/04/12 职场文书
C++程序员求职信
2014/05/07 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers