Grunt入门（二）

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

通过控制台填写相关的应用信息：

创建web应用骨架

下载安装grunt插件：

下载安装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 会生成对应的二倍图（说明：其实不是放大图片，对于移动端，我们的切图一般是二倍图，这个时候插件会把图片改名生成对应的文件名为[email protected]文件，在把图片缩小一倍，生成一倍图，在不需要二倍图的机型上使用一倍图来减少流量。因为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中
• 加入邮件插件