grunt入门讲解6：grunt使用步骤和总结

Grunt是啥？

很火的前端自动化小工具，基于任务的命令行构建工具。

Grunt能帮咱们干啥？

假设有这样一个场景：

编码完成后，你须要作如下工做

1. HTML去掉注析、换行符 - HtmlMin
2. CSS文件压缩合并 – CssMinify
3. JS代码风格检查 – JsHint
4. JS代码压缩 – Uglyfy
5. 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 文件的基本内容：

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团队很勤劳，社区活跃，有兴趣能够持续关注。

 

 

 

加油