前端开发神器WebStorm--Grunt 搭建环境(03)

通过上一篇前端开发神器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 控制台。

注意: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 中的配置环境已经搭建完毕。

 

 

 

前端开发神器WebStorm--Grunt 搭建环境(03),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。