Grunt

什么是Grunt

Grunt是基于NodeJs的一个任务管理器，简单的来说就是JavaScript帮助你完成诸如CSS/JavaScript的代码风格检查、合并、压缩，图片压缩处理，LESS、SASS的编译等等。它能够帮助你自动化构建、测试代码、生成文档，固然它还能够作的更多。

 Grunt生态系统很是庞大，而且一直在增加。因为拥有数量庞大的插件可供选择，所以，你能够利用Grunt自动完成任何事，而且花费最少的代价。若是你找不到你想要的插件，你能够本身编写一个并发布出来供你们使用。

 Grunt官网：http://gruntjs.com Grunt插件地址：http://gruntjs.com/plugins Grunt中文网：http://www.gruntjs.net/

环境搭建、安装及配置

NodeJs环境搭建

由于Grunt是基于NodeJs的，因此首先须要搭建NodeJs的环境，如今NodeJs的官网（http://nodejs.org/）已经有了windows版本的安装包很是方便，下载对应的版本进行安装，以windows7操做系统为例。

1.下载node-v0.10.26-x64.msi （个人系统是64位的）

2.直接安装

3.修改npmrc文件，由于天朝的限制（大家懂的）在线安装NPM模块的速度之比蜗牛快那么一点，咱们不得不把NPM的registry地址修改下：

进入你的NodeJs安装目录，找到 ~\nodejs\node_modules\npm\npmrc 文件并打开，在文件的最下面加入一行代码：

registry = http://registry.cnpmjs.org

就像下面这样：

完成上述步骤后能够运行cmd，输入node -v 和 npm -v 查看NodeJs和NPM的版本，一样这表明了你已经完成了NodeJs的运行环境搭建。

grunt-cli安装

须要经过NPM来全局安装grunt-cli，输入npm install -g grunt-cli 进行安装：

（由于咱们以前从新指定了registry的地址，因此下载安装速度飞快啊。）

实际案例操做

package.json 和 Gruntfile.js

要想使用grunt，package.json和Gruntfile.js两个文件是必须的，两个文件必须放在同一级同时最好放在项目的根目录中。

package.json

package.json，包含了项目的一些基本信息和grunt所须要的插件列表信息，能够复制如下代码用来建立一个package.json文件。

*name 填写你的项目名称

*version 填写项目的版本号

*evDependencies 所依赖的插件列表

经过npm install命令就能够自动安装devDependencies中罗列的插件了

同时项目文件夹中会生成一个node_modules文件夹，里面就是下载安装好的各个依赖的插件了。

Gruntfile.js

Grunt的全部任务都是经过Gruntfile.js来配置的，你须要：

经过grunt.initConfig() 来配置任务

经过grunt.loadNpmTasks() 来声明加载插件

经过grunt.registerTask() 定义任务组合

下面的代码配置了JavaScript压缩、CSS压缩、拷贝文件、监听文件四个任务，经过grunt.registerTasks()将它们组合成了两个任务分别是default默认任务，wh监听文件任务。

点击下载：Gruntfile.js

在终端中输入命令grunt来运行default任务，输入grunt wh来运行watch任务。

配置grunt-contrib-watch

grunt-contrib-watch是一款能够实时监听项目文件添加、修改、删除时自动运行预先设置或刷新页面任务的Grunt插件，能够经过npm install grunt-contrib-watch --save-dev，来安装watch插件，安装好之后package.json会自动将其加入列表中。

github地址：https://github.com/gruntjs/grunt-contrib-watch

配置watch及livereload任务

上面的代码配置了监听CSS/JS文件夹下的文件（但不包括压缩文件），当文件内容更改时，自动执行压缩任务，并经过livereload任务刷新页面。

想要页面自动刷新须要客户端和livereload进行通讯了，官方文档列出了四种通讯方式：

1.在页面上使用livereload.js

2.在浏览器上使用Live Reload插件

3.使用connect-livereload中间件

4.使用库tiny-lr，来实现

最方便的仍是第一种，在前面加上,在终端输入grunt wh就开始监听文件了，只要文件被修改过，就会自动触发配置的任务。

总结

1.Gruntfile.js 的语言是js，贴近前端，学习成本低。

2.Grunt的配置和使用是很是简单的，每一个人能够根据本身的习惯去安装插件配置任务，搭建本身的自动化工做流。

3.Grunt能作的事情不止这些，还有不少其它的功能等待咱们去挖掘