Grunt入门学习(1) - 环境安装
这周根据项目需要，在项目的基础上分模块开发了一个小的项目板块，但是在规范组织每个模块的代码和其依赖性时比较麻烦，需要一个项目板块的构建工具。各个模块都包括其对应的html页面模板、css样式表、Javascript文件，以及相关的依赖文件，图片等。
具体的目录结构如下图所示：
往往在代码上传和项目发布之前需要将模块内各个文件比如JavaScript文件、CSS样式表，图片等进行压缩合并，目的主要在于减少加载文件的大小，加快文件加载速度，同时也能在一定程度上保护源代码，提高安全性。Grunt是一个基于node.JS的自动化构建工具。对于需要反复重复的任务，例如代码压缩（minification），合并、编译、文件拷贝、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。只要在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
下面开始学习Grunt来实现将VariableMessageSignManagement目录下的所有模块自动拷贝到compressedFiles目录，并且尽可能的压缩每个模块的资源文件。
1.首先安装grunt-cli, grunt 以及所需的grunt插件
要使用grunt，首先需要安装grunt-cli到全局环境中，在命令行窗口中执行如下命令：
npm install -g grunt-cli //这条命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行与grunt相关的命令了。
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样有一个好处是，允许你在同一个系统上同时安装多个版本的 Grunt。这样就能让多个版本的 Grunt 同时安装在同一台机器上。
然后进入项目根目录(此处我将VariableMessageSignManagement的父目录作为的根目录)。
根目录具体如图：
。
(1) 在根目录下新建两份文件：package.json 和 Gruntfile.js //package.json文件名是固定的，必须是这个；Gruntfile.js文件名不固定，可以按个人爱好自己设定，但建议用此名，醒目！
package.json 文件被用于列出项目依赖的grunt和Grunt插件版本，放置于devDependencies配置段内。Gruntfile.js 用来配置或定义任务（task）并加载Grunt插件的，一般是JS文件或者coffee文件。
新建的package.json文件，里面内容是编辑器自行填写的，不用管；而Gruntfile.js文件内是空的，什么都没有！
(2) 执行如下命令开始安装grunt 以及相关的grunt插件：
npm install grunt –-save-dev //这条命令是安装最新版的grunt到项目根目录，--save-dev 表示将其添加到package.json文件的devDependencies内。同时会在根目录新建node_modules目录，存放grunt等的功能文件。如下图所示：
同样，grunt插件和其它node模块都可以按相同的方式安装，并自动添加到devDependencies内。在此我安装了几个常用的grunt插件
npm install grunt-contrib-copy –-save-dev //复制文件和文件夹
npm install grunt-contrib-htmlmin –-save-dev //压缩HTML文件
npm install grunt-contrib-uglify –-save-dev //压缩JS文件
npm install grunt-contrib-cssmin –-save-dev //压缩CSS文件。
npm install grunt-contrib-imagemin –-save-dev //压缩PNG，JPEG和GIF等图像
装完这四个grunt插件后，devDependencies配置如左图所示！
2.其次编写Gruntfile.js任务文件
Gruntfile.js 或 Gruntfile.coffee 文件是有效的 JavaScript 或 CoffeeScript 文件。应当放在项目根目录中，和package.json文件在同一目录级，并和项目源码一起加入源码管理器。