grunt，当下前端界知名度最高的工作流处理工具。
在一线的互联网公司，它早已经被用烂了，而我真正接触，是在去年年底...
期间还因为内心太杂分心玩乐而荒废学途，以致到最近才重拾学业，在这里BS一下自己...
其实最近内心依然还包含杂质，只不过已收心回归一点点学习状态了。
废话到此为止，这便把这星期对grunt的学习心得整理汇总一下。
要说grunt，不得不先说说node.js。当下，很多大神的博客网站都能找到grunt的教程。但是，其中对node.js的说明都是一笔带过。
而这对没接触node.js的人而言就好比想进门看个究竟，却发现门上有锁，不得不先找钥匙。
而我碰巧就是这种人...所以，我在自己的整理笔记上，决定一说这环境搭建。
至于node.js是什么，不在笔记的范围内，就不多言了。
这里只需知道，要运行grunt，必须有node.js环境。
下面是搭建node.js的主要步骤：
1.下载安装文件，下面是win7 64位系统版本的安装文件下载镜像地址：
http://dist.u.qiniudn.com/v0.10.26/node-v0.10.26-x86.msi
如果上面的地址不能用了，或者觉得版本太低不喜欢，可以直接去node官网下载：
http://www.nodejs.org/download/
2.下载之后，傻瓜式安装，不停的下一步。
3.安装完成之后，“开始—所有程序—Node.js—Node.js command prompt”
4.打开命令窗之后，执行下面语句：
npm config set prefix "E:\node\node-global"
npm config set cache "E:\node\node-cache"
上面语句的作用是配置全局模块的安装路径到“E:\node\node-global”，npm缓存到“E:\node\node-cache”
node 全局模块大多数都是提供命令行访问的，所以还要把 “E:\node\node-global” 加到系统PATH里面，方面直接运行使用！
PS：上面的路径，可根据个人需要设置到不同地方
安装玩node.js后，还要安装grunt。在完成上面的提到的工作之后，安装grunt只需要简单的一行指令即可：
npm install -g grunt-cli
这里需要注意的是，grunt有两个版本，服务端版本（grunt）和客户端版本（grunt-cli），我们要安装的是客户端版本。
如果你不慎安装了服务端版本，执行下面指令卸载之。
npm uninstall -g grunt
npm install 和 npm uninstall 分别是模块安装和卸载命令， -g 是全局安装/卸载的意思，后面跟的是需要安装/卸载的模块名。
环境搭好了，接下来说说怎么使用。
首先，在需要使用grunt的项目根目录建两个文件package.json和Gruntfile.js
下面是一个很简单的package.json文件实例：
{
"name": "ngDemo", //项目名
"version": "1.0.0", //项目版本号
"devDependencies": {
"grunt-cmd-transport": "~0.3.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-clean": "~0.5.0"
} //项目中依赖的grunt插件，冒号后面的内容表示使用该版本以上的插件
}
此外，package.json还能配置其他信息，这里就不一一列出，有兴趣可阅读下面文章，当中有提到相关内容：
http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html
package.json建好之后，运行命令行窗口，cd到项目根目录，执行下面命令，就能安装所需插件了。
npm install
上面命令成功执行后，项目根目录会多出一个node_modules文件夹，里面就是刚刚安装的插件了。
接下来，就是重头戏了—Gruntfile.js
这是grunt的任务配置文件，它告诉grunt我们要做什么，使用grunt，不外乎两者：1.写任务配置，2.写grunt插件
作为菜鸟，我目前只在应用阶段，所以我只了解了任务配置一环，也就是Gruntfile.js的编写。
至于grunt插件的编写，等日后有再深入，一来grunt的插件本身很丰富，功能也全面；二来当下还有其他学习目标。
再然后，我要掉链子了。对于Gruntfile.js的编写说明，实在是太繁琐太复杂，要在这里说清楚，需要很长的篇幅。
由于我实在缺少这个耐心去整理（知识点很散很多），所以这里无耻的以一个传送门解决问题，阿门，主会原谅我的...
下面连接，是大漠大神对Gruntfile.js任务配置的一篇教程，很详细，很长，知识点比较散，耐心看完吧：
http://www.w3cplus.com/tools/grunt-tutorial-configuring-tasks.html
但在本部分结束之前，还是要把当中的重点记下。
一是关于文件路径的匹配规则：
* — 匹配任意数量的字符，但不匹配/
? — 匹配单个字符，但不匹配/
** — 匹配任意数量的字符，包括/，只要它是路径中唯一的一部分
! — 在模式的开头用于否定一个匹配模式(即排除与模式匹配的信息)
[] — 匹配指定范围内的字符，如：[0-9] 匹配数字 0-9， [a-z] 配置字母 a-z
{x,y} — 匹配指定组中某项，如 a{d,c,b}e 匹配 ade ace abe
下面是一些示例：
//可以指定单个文件
{src: 'foo/this.js', dest: …}
//或者指定一个文件数组
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: …}
//或者使用一个匹配模式
{src: 'foo/th*.js', dest: …} //一个独立的node-glob模式
{src: 'foo/{a,b}*.js', dest: …}
//也可以这样编写
{src: ['foo/a*.js', 'foo/b*.js'], dest: …} //foo目录中所有的.js文件，按字母排序
{src: ['foo/*js'], dest: …}
//这里首先是bar.js，接着是剩下的.js文件按字母排序
{src: ['foo/bar.js', 'foo/*.js'], dest: …} //除bar.js之外的所有的.js文件，按字母排序
{src: ['foo/*.js', '!foo/bar.js'], dest: …}
//所有.js文件按字母排序, 但是bar.js在最后.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: …} //模板也可以用于文件路径或者匹配模式中
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
//它们也可以引用在配置中定义的其他文件列表
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: …}
好了，当任务配置文件写好后，就一切就绪了。
当然，在这里我假设并默认你已经看完上面的任务配置教程，并能写出优美无误的配置文件来了...
接下来是执行了任务了。先运行命令行窗口，cd到项目根目录。
假如你配置了默认任务，直接执行：
grunt
就会执行默认任务中的所有子任务。
你也可以单独执行某个任务：
grunt uglify
命令格式是grunt task。
如果某个任务里还配置了子任务，可以指定执行某个子任务：
grunt uglify:dist
命令格式是grunt task:target。
除了命令行方式外，你还可以使用webstrom 8.0，它内置了grunt工具。具体的话你只要安装之后就一目了然了，非常方便。
此外还能一键打开命令行工具，自动cd到当前项目根目录，也是相当的便捷。
虽然对于grunt插件的编写，我还未有深入研究，但还是找了一个示例，以备日后学习之用：
'use strict'; //这里可以写依赖的模块
var path = require("path"); module.exports = function(grunt) { grunt.registerMultiTask('{your task name}', '', function() {
//这里拿到options信息，即是gruntfile.js里的对的{your task name}的配置的options
var options = this.options({}); //遍历所有的src文件
this.files.forEach(function(f) { //根据正则过滤相应文件
var src = f.src.filter(function(filepath) {
// filepath是当前文件相对项目目录的路径
if (!grunt.file.exists(filepath)) {
grunt.log.warn('Source file "' + filepath + '" not found.');
return false;
} else {
//这里做想要做的事
var commentsReg = /<!--.*?-->/g;
//读到当前文件
var html = grunt.file.read(filepath);
//替换注释
html = html.replace(commentsReg, "");
//写到文件
grunt.file.write(f.dest + filepath, html);
return true;
}
}); }); }); };
最后，送上w3cplus的grunt系列教程连接：
http://www.w3cplus.com/blog/tags/372.html
里面有很多篇关于grunt使用的文章，很全，在此向大漠致敬，w3cplus真是一个非常优秀的前端专业网站。