Grunt入门（二）
上一篇文章里，简单的讲解了grunt的使用方法。上一篇文章最后的问题，是不是每一个项目的gruntfile和package.json文件都要开发者自己手动去创建呢？答案是不需要的。这一篇文章就讲一讲脚手架工具yeoman。
什么是Yeoman
Yeoman是一个旨在为开发者提供一系列健壮的工具、程序库和工作流，帮助他们快速构建出漂亮、引人注目的Web应用。它包括三个部分Yo、GruntJS、Brower分别用于项目的创建、文件操作、包管理。接下来重点讲讲Yo。
Yo是一个项目初始化工具，可以生成一套启动某类项目必需的项目文件。它提供了非常多的模板，用来生成不同类型的 Web 应用。这些模板称为生成器（generator）。
使用Yo
安装Yeoman
通过npm安装：npm install -g yeoman
安装generator-atm
Yo自带的生成器并不能满足团队定制化的需要，Yo允许开发自己开发生成器。npm install -g generator-atm 来安装我们自己团队的ATM模板。
创建web应用骨架
通过简单的命令：yo webapp 就可以创建一个简单的web应用骨架，拿组内的ATM来说，只需要运行yo atm
通过控制台填写相关的应用信息：
下载安装grunt插件：
应该一些列的选择和提示之后，web应用骨架就完成了。
在我们的目录中会出现这么一些文件：
ATM中使用Yo的部分就结束了。
更新generator-atm
和普通的npm包更新一样，更新ATM模板生成器，只需要运行npm update -g generator-atm 就可以了。
使用Grunt来快速完成项目开发
创建好web应用骨架后，就是Grunt来完成我们日常开发中合并sprite图、编译Less、压缩代码、上传测试服务器等需求了。
编译Less
使用grunt tc 可以编译Less并监听Less文件的改变，实时编译
拼合雪碧图
grunt 2x会生成对应的二倍图（说明：其实不是放大图片，对于移动端，我们的切图一般是二倍图，这个时候插件会把图片改名生成对应的文件名为filename@2x.type文件，在把图片缩小一倍，生成一倍图，在不需要二倍图的机型上使用一倍图来减少流量。因为grunt的合并雪碧图的插件是这么个命名规则。PC端，直接是一倍图，缩小后的图其实是无用的，所以同样可以使用次插件来合并。）grunt sprite用来合并雪碧图，并自动替换css里面的背景引用，增加相应的background-position属性。同样可以使用
grunt sp来合并操作第一步和第二步
px与rem互转
默认配置里面，是px to rem，运行grunt px2rem 可以将css目录下的css文件中的px转为rem。修改Gruntfile.js 文件中的changeMode选项可以将rem转换为px。
上传测试服务器
grunt testc 将需要上传测试服务器的文件复制到publish文件夹下面并上传。
grunt test 不会复制文件夹，直接将publish文件夹下面的文件上传至测试服务器。
压缩文件
-
grunt pngmin压缩png图片 -
grunt cssmin压缩css图片 -
grunt dataUri把需要base64化的图片弄成转成base64 -
grunt zip包括合并雪碧图及前面三个步骤
上传CDN
grunt cdn将css、js、img文件上传至cdn服务器上，并替换css和html的资源引入路径。
如果想压缩再上传CDN服务器，可以使用grunt pub
未来更新
- JS公共库引入并插入HTML中
- 加入邮件插件
