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