任务(Tasks)是grunt的核心概念,你所做的很多工作比如资源合并(concat)、压缩(uglify)都是在配置任务。
每次grunt运行的时候,你指定的一个或多个任务也在运行,如果你没有指定任务,那么一个默认名为“default”的任务将自动运行。

有时我们需要写一些自己的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包

这整个目录结构如下

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

再输入 grunt mytask:snandy


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

再输入 grunt mytask:snandy:backus


冒号间隔可以传多个参数

三、一次创建多个任务

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

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

四、任务间通讯

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

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

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

grunt.registerTask('default', '默认的任务', function() {
grunt.task.run('mytask1', 'mytask2')
// 或者
grunt.task.run(['mytask1', 'mytask2'])
})

  

如何自定义Grunt任务的更多相关文章

  1. GruntJs安装及使用入门(自定义grunt任务,合并压缩js、css)

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...

  2. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  3. cordova3.X 运用grunt生成plugin自定义插件骨架

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还提供了一组统一的JavaScript类库,以及为这些 ...

  4. grunt 自定义任务实现js文件的混淆及加密

    //自定义任务 module.exports = function (grunt) { // 项目配置 var http = require('http'); var qs = require('qu ...

  5. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  6. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  7. 前端打包构建工具grunt快速入门(大篇幅完整版)

    打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...

  8. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  9. grunt任务之seajs模块打包

    grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile ...

随机推荐

  1. EntityFramework 6.1.2-beta2

    EntityFramework 6.1.2-beta2 Entity Framework is Microsoft's recommended data access technology for n ...

  2. c#重点[集合类型]异常,数组,集合ArrayList,List<>,hashTable,hashtable泛型(Dictionary)

    1.foreach[对一些数组或集合进行遍历] foreach(类型 变量名 in 集合对象){语句体} //定义一个数组 ,,,,, }; foreach(var i in sNum1) { Con ...

  3. 重新想象 Windows 8 Store Apps (42) - 多线程之线程池: 延迟执行, 周期执行, 在线程池中找一个线程去执行指定的方法

    [源码下载] 重新想象 Windows 8 Store Apps (42) - 多线程之线程池: 延迟执行, 周期执行, 在线程池中找一个线程去执行指定的方法 作者:webabcd 介绍重新想象 Wi ...

  4. 重新想象 Windows 8.1 Store Apps 系列文章索引

    [源码下载] [重新想象 Windows 8 Store Apps 系列文章] 重新想象 Windows 8.1 Store Apps 系列文章索引 作者:webabcd 1.重新想象 Windows ...

  5. ASP.NET MVC进阶二

    一.数据验证 数据验证的步骤 在模型类中添加与验证相关的特性标记 在客户端导入与验证相关的js文件和css文件 使用与验证相关的Html辅助方法 在服务器端判断是否通过服务器端验证 常用的验证标记 R ...

  6. [moka同学摘录]Yii2.0开发初学者必看

    想要了解更多YII,PHP方面内容,请关注本博客. 基础总结 1.修改默认控制器/方法 yii默认是site控制器,可以在web.php中设置$config中的'defaultRoute'='xxxx ...

  7. PHP学习笔记:用php读取xml文件

    xml已经被json逐渐替代,现在用的api都是用貌似用的json,但是有些老的网站还是在用xml. 这里默认xml文件为:address.xml,存放在和读取的php文件相同级别目录,xml内容如下 ...

  8. Hibernate框架之入门

    1.Hibernate框架简述 Hibernate的核心组件在基于MVC设计模式的JAVA WEB应用中,Hibernate可以作为模型层/数据访问层.它通过配置文件(hibernate.proper ...

  9. JavaScript来实现打开链接页面(转载)

    在页面中的链接除了常规的方式以外,如果使用javascript,还有很多种方式,下面是一些使用javascript,打开链接的几种方式: 1.使用window的open方法打开链接,这里可是在制定页面 ...

  10. ahjesus解决win下U盘无法写入的问题

    可能是由于不同品牌的U盘出厂时磁盘分区和格式化方式不同而引起的兼容性问题.解决方案如下 启动cmd.输入diskpart,启动DISKPART工具 在DISKPART窗口中输入以下命令: >li ...