JavaScript 项目构建工具 Grunt 实践:任务和指令
2013-01-28 14:40
633 查看
Grunt 是一个基于任务的 JavaScript 项目命令行构建工具,运行于 Node.js 平台。Grunt 能够从模板快速创建项目,合并、压缩和校验 CSS & JS 文件,运行单元测试以及运行静态服务器。上一篇文章《JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架》介绍了 Grunt 安装和创建项目框架步骤,这篇文章介绍 Grunt 中的任务和指令。
✓ init - 从模板生成项目框架
✓ concat - 合并文件
✓ lint - 使用 JSHint 校验代码
✓ min - 使用 UglifyJS 压缩代码
✓ quint - 运行 Qunit 单元测试(依赖 PhantomJS)
✓ server - 启动静态服务器
任务按使用方式可以分为别名任务、多任务和自定义任务。
?
taskName:任务别名,descripation:任务描述,taskList:任务列表。
使用示例:
?
这样定义以后,下面两条命令是等价的:
?
如果别名是 "default",那么命令还可以更简单,只需要输入 grunt 就可以了。
?
下面三条命令是等价的:
?
?
?
在任务里还可以嵌套其它任务:
?
甚至运行异步任务:
?
精心挑选的优秀 jQuery Ajax 分页插件
十款精心挑选的在线CSS3代码生成工具
让人爱不释手的13套精美网页图标素材
10套精美的免费网站后台管理系统模板
本文链接:JavaScript 项目构建工具 Grunt 实践:任务和指令
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
Grunt 任务
Grunt 内置下面六种基本的任务:✓ init - 从模板生成项目框架
✓ concat - 合并文件
✓ lint - 使用 JSHint 校验代码
✓ min - 使用 UglifyJS 压缩代码
✓ quint - 运行 Qunit 单元测试(依赖 PhantomJS)
✓ server - 启动静态服务器
任务按使用方式可以分为别名任务、多任务和自定义任务。
一、别名任务
基本语法:?
使用示例:
?
?
?
?
二、多任务
多任务是在如果没有指定任务目标的时候隐式地遍历所有的目标。例如下面的配置,运行 grunt lint:test 或者是 grunt lint:lib 都是校验特定的目录下的 JavaScript 文件,如果是运行 grunt lint 则是自动运行 test、lib 和 grunt 三个目标。?
三、自定义任务
如果你的任务不遵循多任务模式,可以自定义任务:?
?
?
Grunt 指令
Grunt 内置下面五种指令:<config:prop.subprop>
用于扩展 prop.subprop 配置属性的值。<json:file.json>
用于调用通过 grunt.file.parseJSON 从 file.json 解析出来的对象。<banner:prop.subprop>
用于访问 prop.subprop 参数属性,通过 grunt.template.process 解析。<file_strip_banner:file.js>
用于引入将要嵌入注释的脚本文件<file_template:file.js>
用于引入模板文件,通过 grunt.template.process 解析。您可能感兴趣的相关文章
经典的白富美型 jQuery 图片轮播插件精心挑选的优秀 jQuery Ajax 分页插件
十款精心挑选的在线CSS3代码生成工具
让人爱不释手的13套精美网页图标素材
10套精美的免费网站后台管理系统模板
本文链接:JavaScript 项目构建工具 Grunt 实践:任务和指令
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
相关文章推荐
- JavaScript 项目构建工具 Grunt 实践:任务和指令
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
- JavaScript 项目构建工具 Grunt 实践:合并文件
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
- 项目工具JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
- JavaScript 项目构建工具 Grunt 实践:安装和创建项目框架
- JavaScript 项目构建工具 Grunt的安装
- 使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
- grunt 0.4.1构建工具入门实践(转)
- 基于Node.js的JavaScript项目构建工具gulp的使用教程
- javascript 前端 基于 npm、bower、grunt的标准项目构建
- Node.js的项目构建工具Grunt的安装与配置教程
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- 前端构建实践02:用 Grunt 运行构建任务
- 项目构建工具学习与实践总结
- grunt 0.4.1构建工具入门实践
- maven项目中整合grunt构建工具(二)-js合并、压缩技术