标签：
在前端开发中，目前说来grunt用的挺广的。听说Jquery，Bootstrap等都在用其做为自己的自动化管理工具。可以想象受欢迎的程度了。所以在实际开发工作中，作为前端人员如果对grunt这个工具不熟悉的话，那么说明你之前的开发并不属于一种正规的前端开发。由于grunt完全免费，且功能强大，那么我们今天就要好好的来品评一番。
首先，安装NodeJs
由于grunt的所有插件都是基于nodejs来进行安装和运行的，所以如果电脑上没有nodejs的话，需要安装一个。我们可以去其官网（https://nodejs.org/）下载然后安装即可。
安装完毕之后，你可以在CMD中输入node -v命令来查看nodejs的版本，如果出现版本号，那么说明你的nodejs安装成功了。我这里安装成功后，输入之前的命令，然后显示我安装的版本是v4.1.1。有一点需要注意的是，grunt依赖的nodejs版本必须高于v0.8.0，所以如果你安装的版本号小于这个版本，还是重新安装一下较新版本的吧。
其次，安装grunt-cli
这是第二个依赖组件，可以理解为grunt命令行，它必须被安装到全局环境中。如果第一步你的nodejs安装好之后，你就可以使用 npm install –g grunt-cli 命令来安装了。请注意控制台必须以管理员权限打开才行，以免出现某些组件无法被正确安装的情况。回车之后，就可以看到组件自动从官网上下载，然后往本机安装了，这个过程比较缓慢。一般要等上5分钟左右才能安装完毕，安装完毕后，为了验证是否生效，你只需要在命令行中输入grunt命令即可，如果生效，则会出现如下的提示，则表明安装好了：
然后，检测成果
我们这里通过建立一个简单的网站来演示grunt插件的安装，使用方法。
首先我们在本地建立一个GruntTest文件夹，然后里面建立三个空文件夹：build, src, test； 两个空白文档：Gruntfile.js, package.json。
我们先不用管这些都是用来干啥的，我们首先在package.json文件中添加一些json格式的内容，如下所示：
上面json文件的内容，就是规定了网站的名称，版本。而那个devDependencies则代表网站开发的时候，会依赖于哪些工具来开发。由于现在我们没有任何内容，所以这里就暂时为空。后面我会慢慢的将其丰富起来的。
然后，开始正式安装grunt
上面的都准备好以后，这里我们就可以开始正式安装grunt了。首先我们进入GruntTest目录下，然后输入如下命令：npm install grunt –save-dev，这里需要解释的是，—save-dev的意思就是，在当前目录安装grunt，同时把grunt保存为这个目录的开发依赖项。而这个开发依赖项正是放在了package.json文件中的devDependencies节点中。我们运行这个命令，然后会出现安装的结果：
然后我们安装完毕后，去打开package.json去看看，我们发现内容变了，变成了如下的样子了：
然后我们发现目录下面多了一个node_modules文件夹，里面有一个grunt文件夹，这时候我们在GruntTest文件夹下运行cmd命令 grunt，会出现报错提示，但是正是这样，才说明我们的grunt安装成功了。
然后，配置Gruntfile.js
还记得最开始的时候创建的Gruntfile.js文件吗，这个就是为grunt做配置的。首先我们需要手动将Gruntfile.js中填充如下的内容：
然后我们再在当前文件夹下运行cmd，输入grunt命令，我们发现不会出现错误提示了，而是提示：Done，without errors。
然后，我们来看看Grunt插件系统
标签：
原文地址：http://www.cnblogs.com/scy251147/p/4876230.html
