windows下安装node环境，以及grunt试水笔记

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真是一个非常优秀的前端专业网站。