Grunt工具安装使用简易流程

Grunt工具安装使用简易流程

1.   下载安装node.js  64/32

2.   Win+R呼出命令行工具->输入cmd->进入dos操作页面->设置grunt命令 到系统全局变量中

（npm install -g grunt-cli ）(这样，你在任何位置使用grunt命令就都可以啦！)

设置中：

设置完成：

3.   新建项目

4.   win+R->输入cmd->进入命令行->使用cd命令->进入当前项目下->输入

（npm init）在当前项目自动 生成package.json文件

例：比如我在D盘新建一个grunttest项目

进入当前项目文件夹：

输入：npm init 生成json文件

第一行name：随便打一个，之后一直点击Enter就可以

完成：

5.   仍然是当前目录，直接输入npm install grunt --save-dev 安装grunt

安装成功：

6.   安装插件

好多插件，我先挑css精灵安装了，以后用到什么安装什么就是，Gruntfile.js文件中都有写

在命令行中输入：npm install grunt-spritesmith--save-dev

7.   新建Gruntfile.js文件  设置配置参数，参考Gruntfile.js文件

使用webstrom打开项目，在项目根目录创建Gruntfile.js文件

测试一下插件是否可用

目录结构：

Gruntfile.js文件内容：

简单的配置说明：

src:你要合成sprite的图片路径

dest:合成后的sprite图片存放位置

destCss:合成后的每个图片的css位置

8.   当前目录 cmd中运行 grunt sprite（运行压缩图片功能）

成功：

9.   测试一下

效果：

上面是一张图片，中间用<br/>标签间隔出来，使看起来更清晰一些。这样用合成的图片，使用background-position定位，达到减少对服务器请求的效果。

 

 

           制作：侯建平