任务(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 任务示例这个存储库是对创建自定义任务的讨论的补充。 涵盖的主题创建和加载任务访问 CLI 选项访问和修改配置选项使用 Grunt 日志使用目标异步任务
grunt-build-countdown 定制任务
grunt-plugin-rename-from-file 通过将文件映射到提供的名称列表来批量重命名文件。 旨在重命名与来自json...“ plugin_rename_from_file”任务 选项 图片 要重命名的图像的目的地 名字 JSON文件的目标,其中包含要使
如何自定义Grunt任务 有时我们需要写一些自己的grunt任务,下面是一个具体例子 一、准备 1. 新建一个目录g12. 新建package.json,放入g13. 新建Gruntfile.js,放入g1 package.json 代码如下: { “name”: “g1”,...
自定义 Grunt 插件样板这是一个快速而肮脏的 Grunt 插件样板。 您还可以访问 Gruntjs 上的并以这种方式获取示例样板。设置说明cd进入目录npm install 如果您愿意,可以在Gruntfile.js配置传递给custom_plugin任务的...
对 JSON 文件执行自定义函数的 Grunt 任务 入门 这个插件需要 Grunt >=0.4.0 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建以及安装和使用 Grunt 插件。 熟悉该过程后,您可以使用以下命令安装此...
咕噜佛佛光如阳光入门这...“buddha_janeluck”任务概述在项目的 Gruntfile 中,将名为buddha_janeluck的部分添加到传递给grunt.initConfig()的数据对象中。 grunt . initConfig ( { buddha_janeluck : { options : {
自定义 Grunt 任务将输入图片的大小调整为各种大小的停靠点,并创建一个静态 JSON 文件来为它们编制索引。 Angular 应用程序使用 JSON 文件来显示图库,并允许以完全适合浏览器宽度的不同大小停止查看。 安装 安装 ...
grunt-zipup grunt插件可创建带有可自定义/自动包名称和后缀的zip文件。执照Apache版本2。有关更多详细信息,请参阅LICENSE文件。入门grunt-zipup已在以下位置进行了测试: Fedora 17 Linux(64位) Windows 7企业版...
定义自定义每个任务助手的简便方法 入门 这个插件需要~0.4.1 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm ...
根据您的喜好自定义每个任务的输出。 跳转到部分 介绍 所以先生,你终于来了。 你已经创建了最棒的 Grunt 工作流程,使用了十几个很棒的插件。 您正在运行它们,他们甚至可能提供一些额外的了一些急需的定制。 说...
这是一个使用 Grunt 设置的项目,用于处理一些标准任务,例如:使用 RequireJS 编译基于 AMD 的模块,观察/将 Sass 编译为 CSS,观察/整理 JS 代码以及其他一些事情,例如运行单元测试。 依赖关系 gem install image...
资源文档按照“入门”中的描述加载 grunt-jquerybuilder 任务,并将您的 jQuery 构建器配置添加到您的 grunt 文件中: 示例 jQuery 构建器 grunt 文件配置条目: // ... grunt file contents jquery : { // the ...
使用grunt jasmine命令运行此任务。 通过Headless Chrome自动构建和维护您的规范运行程序,并轻松运行测试。 在本地或在远程服务器上运行规范 在本地文件系统上或通过诸如类的服务器任务运行测试。 使用模板自定义...
通过 Grunt 从 SVG 文件生成自定义图标 webfonts。 基于。 此任务将使您在网站上使用字体图标所需的一切:所有需要格式的字体、CSS/Sass/LESS/Stylus 和 HTML 演示页面。 特征 适用于 Mac、Windows 和 Linux。 ...
当您准备好构建时, grunt-modernizr会抓取您的项目以获取Modernizr测试参考,并仅使用您在JavaScript或(S)CSS中使用的测试来保存缩小,丑化,自定义的版本。 入门 使用以下命令在项目的[grunt.js gruntfile] ...
将以下功能配置为构建: 在生产模式下运行时,缩小,连接和修订js和css文件能够根据环境向HTML提供自定义代码可以监视更改并自动重新运行构建用法nmp install ,安装依赖项grunt prod或其他任何grunt任务注册了以下...
通过Grunt从SVG文件生成自定义图标Web字体。 受启发。 该任务将使您只需要使用网站上的字体图标即可:所有必需格式的字体,CSS / Sass / Less / Stylus和HTML演示页。 特征 咕>声> = 1.0.0 最新的依赖版本 在Mac...
IE base64 保护程序 此任务复制样式表中的样式,附加自定义选择器并为添加忽略注释标志。 由 Dean James 创建 ( )入门使用以下命令安装此插件: npm install ie - base64 - protector 接下来,将此行添加到项目的 ...
grunt-json-wrapper 将 JSON 文件包装在自定义包装器中,为它们生成一个 JS 文件。 对于每个包装器,都接受以下占位符:{filePath}、{fileName}、{fileExtension}、{filePrefix} 和 {content}。入门这个插件需要 ...