Grunt

Grunt这货是啥？

最近很火的前端自动化小工具，基于任务的命令行构建工具 http://gruntjs.com

 

Grunt能帮咱们干啥？

在开始介绍前，先向你们描述下面的场景:

【场景1：项目开始前】

1. 先创建一个 projA 的文件夹 再建 html css js images （建5个或以上文件夹，花费1分钟）
2. 拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
3. 再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… （建N个文件，花费N分钟）

【场景2：编码中】

编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………

键盘就这样杯具了….

【场景3：编码完成】

1. HTML去掉注析、换行符 - HtmlMin
2. CSS文件压缩合并 – CssMinify
3. JS代码风格检查 – JsHint
4. JS代码压缩 – Uglyfy
5. image压缩 - imagemin

 

在一个项目过程当中，重复而枯燥的工做太多了…. 绳命就这样浪费了。

咱们须要一个自动化的工做流程，让咱们更专一于coding，而不是coding外的繁琐工做。因而Grunt应运而生。能够想像，若是在node环境下，一行命令搞定一个场景，So Cool…

 

Grunt安装配置

安装 grunt-cli

1. 1. 自备node环境(>0.8.0), npm包管理
2. 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 //项目自动化工做流配置文件，重要

 

1. package.json 文件修改 官方文件地址

2. Gruntfile.js 文件修改 官方文件地址

 

开始一个实例

这里以projA为例子，实现的自动化功能以下：

• 编码过程当中自动监控projA目录，若是 .html/ .css/ .js文件变动时，自动刷新浏览器。
• 编码完成后，压缩html、css、js、img文件,并存放到dist/目录下。

 

对应的操做步骤以下：

1. 1. 先配置好package.json、Gruntfile.js两个文件，projA文件打包下载
   
   
2. 2. 执行命令自动下载相对应的Grunt插件【视频演示戳这里】
   命令行执行:

   npm install

3. 3. 启动文件变动监控(livereload)【视频演示戳这里】
   命令行执行:

   grunt live

4. 4. 编码完成后Build【视频演示戳这里】
   命令行执行:

   grunt build

 

Grunt使用总结

1. 1. 配置简单，配置文件Gruntfile.js是JS格式，比较贴近前端知识点。相对Ant之类基于JAVA,又是xml配置，相对来讲学习成本低。
2. 2. Grunt能为咱们作的远不仅这么多,不少Grunt插件待咱们去挖掘使用。
   好比：haml less coffeeScript dataURI html2json
3. 3. 每一个人的具体需求不同，能够按本身的习惯合理配置，组合成最适合本身的自动化工做流。
4. 4. Grunt团队很勤劳，社区活跃，有兴趣能够持续关注。