通过上一篇前端开发神器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 [email protected] C:\Users\佩青\AppData\Roaming\npm\node_modules\grunt-cli ├── [email protected] ├── [email protected] ([email protected]) └── [email protected] ([email protected], [email protected]) D:\Program Files\nodejs> |
3.配置WebStorm Grunt环境
新建一个空项目（以ws-Grunt为例），在根目录新建 GruntFile.js 文件，选中该文件右键点击， 选择
，打开Grunt 控制台。
，打开Grunt 控制台。（注意：js文件的名称必须是GruntFile，否则右键单击不会出现）
操作过程：
都看到最后Grunt 控制台有报错信息（Error）,是因为没有安装Grunt服务。下面教大家安装：
快速按下两次Shift键，就可以看到新弹出来一个窗口（Search EveryWhere），可以搜索项目中的任何内容。在输入框中输入node npm,选择Actions下的Node.js and NPM,
在新弹出的窗口选择
，输入grunt,点击 Install Package ,进行安装。安装成功后，会有绿色信息条提示。关闭当前窗口。再点击OK。
，输入grunt,点击 Install Package ,进行安装。安装成功后，会有绿色信息条提示。关闭当前窗口。再点击OK。此时在根目录下就会生成node_modules的文件夹。刷新Grunt 控制台，错误信息就会消失。
4.配置WebStorm支持Grunt语法提示
配置过程如下：
至此，WebStorm 中的配置环境已经搭建完毕。
前端开发神器WebStorm--Grunt 搭建环境（03）,布布扣,bubuko.com
时间： 2024-12-20 21:52:57