Grunt入门学习之(1) -- 环境安装

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文件在同一目录级，并和项目源码一起加入源码管理器。