前端开发神器WebStorm--Grunt 搭建环境（03）
2020-12-13 13:35
标签：style class blog code http ext 例如 前端开发神器WebStorm--Grunt 搭建环境（03）,搜素材,soscw.com 前端开发神器WebStorm--Grunt 搭建环境（03） 标签：style class blog code http ext 原文地址：http://www.cnblogs.com/eboke/p/3793922.html通过上一篇前端开发神器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>
3.配置WebStorm Grunt环境
新建一个空项目（以ws-Grunt为例），在根目录新建 GruntFile.js 文件，选中该文件右键点击， 选择
，打开Grunt 控制台。（注意：js文件的名称必须是GruntFile，否则右键单击不会出现
）
操作过程：
都看到最后Grunt 控制台有报错信息（Error）,是因为没有安装Grunt服务。下面教大家安装：
快速按下两次Shift键，就可以看到新弹出来一个窗口（Search EveryWhere），可以搜索项目中的任何内容。在输入框中输入node npm,选择Actions下的Node.js and NPM,
在新弹出的窗口选择
，输入grunt,点击 Install Package ,进行安装。安装成功后，会有绿色信息条提示。关闭当前窗口。再点击OK。此时在根目录下就会生成node_modules的文件夹。刷新Grunt 控制台，错误信息就会消失。
4.配置WebStorm支持Grunt语法提示
配置过程如下：
至此，WebStorm 中的配置环境已经搭建完毕。
上一篇：生产者消费者模型 与多线程(1)
下一篇：Web API路由和动作选择
文章标题：前端开发神器WebStorm--Grunt 搭建环境（03）
文章链接：http://soscw.com/essay/33123.html