码迷,mamicode.com
首页 > Web开发 > 详细

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

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

标签:style   blog   http   color   get   使用   

通过上一篇前端开发神器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 文件,选中该文件右键点击, 选择bubuko.com,布布扣,打开Grunt 控制台。

注意:js文件的名称必须是GruntFile,否则右键单击不会出现bubuko.com,布布扣

操作过程:

bubuko.com,布布扣

  都看到最后Grunt 控制台有报错信息(Error),是因为没有安装Grunt服务。下面教大家安装:

 快速按下两次Shift键,就可以看到新弹出来一个窗口(Search EveryWhere),可以搜索项目中的任何内容。在输入框中输入node npm,选择Actions下的Node.js and NPM,

 在新弹出的窗口选择bubuko.com,布布扣 ,输入grunt,点击 Install Package ,进行安装。安装成功后,会有绿色信息条提示。关闭当前窗口。再点击OK。

此时在根目录下就会生成node_modules的文件夹。刷新Grunt 控制台,错误信息就会消失。

bubuko.com,布布扣

4.配置WebStorm支持Grunt语法提示

配置过程如下:

bubuko.com,布布扣

至此,WebStorm 中的配置环境已经搭建完毕。

 

 

 

前端开发神器WebStorm--Grunt 搭建环境(03),布布扣,bubuko.com

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

标签:style   blog   http   color   get   使用   

原文地址:http://www.cnblogs.com/eboke/p/3793922.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!