grunt入门讲解6:grunt使用步骤和总结
2015-01-23 16:20
288 查看
Grunt是啥?
很火的前端自动化小工具,基于任务的命令行构建工具。Grunt能帮我们干啥?
假设有这样一个场景:编码完成后,你需要做以下工作
HTML去掉注析、换行符 - HtmlMinCSS文件压缩合并 – CssMinify
JS代码风格检查 – JsHint
JS代码压缩 – Uglyfy
image压缩 - imagemin
重复而枯燥的工作太多了,我们需要一个自动化的工作流程,让我们更专注于coding,而不是coding外的繁琐工作。于是Grunt应运而生。可以想像,如果在node环境下,一行命令就搞定了上面的所有工作,是不是节省了很多时间。
Grunt安装配置
安装 grunt-cli
1. 自备node环境(>0.8.0), npm包管理2. 卸载旧版本grunt(<0.4.0) (没装过请忽略)
npm uninstall grunt -g
3. 安装grunt-cli
npm install grunt-cli -g
安装 grunt-init(可选)
npm install grunt-init -g
可选安装,grunt-init是个脚手架工具,它可以帮你完成项目的自动化创建,包括项目的目录结构,每个目录里的文件等。具体情况要看你运行grunt-init指定的模板,以及创建过程中你对问题的回答。由于篇幅且配置 grunt-init 模板较为复杂,本课暂不展开讨论,下一课将详细讲解。
配置 grunt
从官网下载package.json和Gruntfile.js 文件放到项目根目录,并对文件进行修改配置.package.json//项目自动化所依赖的相关插件。
Gruntfile.js//项目自动化工作流配置文件。
package.json 文件的基本内容:
![](http://images.cnitblog.com/blog/649546/201501/220929040168049.jpg)
Gruntfile.js 文件的基本内容:
在实际项目中的应用
1. 先配置好package.json、Gruntfile.js这两个文件,具体如何配置,请看前面的课程讲解。2. 执行命令,自动下载依赖的Grunt插件
命令行执行:
npm install
3. 启动任务live的执行,这个任务,你可以用来监控你的源文件是否有变化。
命令行执行:
grunt live
4. 启动任务build的执行,这个任务,你可以用来合并所有的js源文件
命令行执行:
grunt build
Grunt使用总结
1. 配置简单。配置文件Gruntfile.js是JS格式的,比较贴近前端的知识点。相对Ant之类的是基于JAVA的,而且又是xml配置,相对来说学习成本低。2. Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。
比如:haml less coffeeScript dataURI html2json
3. 每个人的具体需求不一样,可以按自己的习惯合理配置,组合成最适合自己项目的自动化工作流。
4. Grunt团队很勤劳,社区活跃,有兴趣可以持续关注。
加油
相关文章推荐
- grunt入门讲解2:如何使用 Gruntfile 配置任务
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
- grunt入门讲解1:grunt的基本概念和使用
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
- Jquery使用Firefox FireBug插件调试Ajax步骤讲解
- MyBatis学习总结一 —— MyBatis的使用步骤及配置
- (转)Cairngorm初学者入门教程 第二节--使用Cairngorm开发程序的步骤
- vmware经验总结--3.VMWare esx,esxi使用入门
- grunt入门指南之三 常用插件的使用
- 存储过程的入门使用的总结
- ios开发入门- xcode开发工具使用讲解
- jaxp使用初级入门(只需要两个步骤,覆盖五个方法)
- curl讲解第一篇---入门和基本使用
- 常用插件的使用—grunt入门指南之三
- RedMind使用 图文讲解 经典 总结
- 图文讲解:Qt 4中工程和变量名中不可以使用的符号总结(英文字符共20种,中文字符不可用)-Qt Creator的智能提示是有限的
- 实例讲解:使用IBM heapAnalyzer分析heap dump文件步骤
- TMS320F280X SPI SPIA使用入门与总结