使用Grunt生成雪碧图

1、Grunt是基于 Node.js 的项目构建工具，所以使用Grunt之前必须先安装好node.js和npm包管理器

2、全局安装Grunt的命令行支持，安装完之后，命令提示符中将会识别grunt命令

npm install -g grunt-cli

3、cd到项目目录下，使用npm init初始化项目（项目名称不要使用中文）

npm init

执行npm init命令，如不需做特殊配置，一直按enter键即可，直到执行完跳出，执行完之后会自动生成一个pakeage.json文件 。（如项目目录下已存在pakeage.json文件，直接跳过此步骤）

4、在项目目录下，安装grunt

npm install grunt --save-dev

5、在项目目录下，安装grunt-spritesmith模块

npm install grunt-spritesmith --save

6、在项目目录下，新建Gruntfile.js文件，内容如下

module.exports=function(grunt)
{     grunt.initConfig({
         pkg:grunt.file.readJSON("package.json"), // 读取配置文件并转换为json对象，后面就可以采用pkg.XXX的方式访问其中的数据
         sprite:{
             options:{
                 banner:'/*<%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd")%>*/\n' // 用于在文件顶部生成一个注释
             },
             all:{
                 src:"origin/*.jpg",    // 用于制作雪碧图的全部图像
                 dest:"images/spritesheet.jpg", // 生成的雪碧图存放位置及命名
                 destCss:"css/sprite.css",  // 生成的雪碧图样式存放位置及命名
                 algorithm:"top-down"   // 图片布局算法：top-down(上到下)、left-right(左到右)、diagonal(左上到右下对角线)、alt-diagonal(右上到左下对角线)、binary-tree(二叉树)
             }
         }
     });
     grunt.loadNpmTasks("grunt-spritesmith"); // 加载模块
     grunt.registerTask("default",["sprite"]); // 默认执行任务
};

这个文件写的是自动生成雪碧图的配置，可以根据自己需求进行修改， 参考文档grunt-spritesmith - npm (npmjs.com)，Grunt: JavaScript 世界的构建工具 | Grunt 中文网

6、执行grunt 或 grunt sprite 命令，自动生成雪碧图和雪碧图css文件

grunt sprite