前端开发神器WebStorm--Grunt 搭建环境（03）

时间：2014-06-29 07:00:31 阅读：6082 评论：0 收藏：0 [点我收藏+]

通过上一篇前端开发神器WebStorm--自动化工作流（前言），相信大家都Grunt自动化工具有了初步了解。

接下来我就以WROC3000 web为原型，演示一下如何使用Grunt工具提高工作效率，最大程度压缩代码。

1.首先安装node环境

进入官网下载安装。（记住安装目录）

检测安装成功方法：打开CMD窗口，输入

node --version

会打印出安装的版本号，说明已经安装成功。

2.安装 Grunt 客户端

在CMD 窗口中，切换到node安装盘符，会自动切换到nodejs安装目录。

输入 `npm install -g grunt-cli 回车`

`安装成功后会显示安装路径以及版本号。`

例如

Your environment has been set up for using Node.js 0.10.28 (x64) and npm.

C:\Users\佩青>d:

D:\Program Files\nodejs>npm install -g grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli
npm http 200 https://registry.npmjs.org/grunt-cli
npm http GET https://registry.npmjs.org/nopt
npm http GET https://registry.npmjs.org/findup-sync
npm http GET https://registry.npmjs.org/resolve
npm http 304 https://registry.npmjs.org/nopt
npm http 304 https://registry.npmjs.org/findup-sync
npm http 200 https://registry.npmjs.org/resolve
npm http GET https://registry.npmjs.org/abbrev
npm http GET https://registry.npmjs.org/glob
npm http GET https://registry.npmjs.org/lodash
npm http 304 https://registry.npmjs.org/abbrev
npm http 200 https://registry.npmjs.org/glob
npm http 200 https://registry.npmjs.org/lodash
npm http GET https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/minimatch
npm http 304 https://registry.npmjs.org/inherits
npm http GET https://registry.npmjs.org/sigmund
npm http GET https://registry.npmjs.org/lru-cache
npm http 304 https://registry.npmjs.org/sigmund
npm http 304 https://registry.npmjs.org/lru-cache
C:\Users\佩青\AppData\Roaming\npm\grunt -> C:\Users\佩青\AppData\Roaming\npm\nod
e_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\佩青\AppData\Roaming\npm\node_modules\grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

D:\Program Files\nodejs>