使用grunt生成雪碧图

　　作为一名前端开发人员，实现前端自动化是一项大大节省开发时间的有效手段；

这样开发人员可以更好更专注于前端代码的开发，而不用过多关注于css压缩，js

检测这样的繁琐的工作。

　　本文主要介绍使用grunt实现前端雪碧图生成，以及生成相应的css文件，

• 安装grunt，这部分就不多说了，具体内容参考http://www.gruntjs.net/

grunt首页详细介绍了grunt的安装步骤以及基本的使用基础。

• 安装完成grunt后，下一步骤就是完成基本的配置工作，主要工作就是实现package.json文件，

以及Gruntfile.js文件的配置工作。

• package.json的配置：

{
    "name": "grunt-spritesmith",
    "description": "Grunt task for converting a set of images into a spritesheet and corresponding CSS variables.",
    "version": "0.0.1",
    "repository": {
        "type": "git",
        "url": "git://github.com/itec-primary/grunt-spritesmith.git"
    },

    "engines": {
        "node": ">= 0.8.0"
    },
    "scripts": {
        "test": "cd src-test && grunt"
    },
    "dependencies": {
        "grunt-spritesmith": ">0.1.0"
    },
    "devDependencies": {
        "grunt": "~0.4.2"

    },
    "keywords": [
        "grunt",
        "sprite",
        "spritesmith"
    ]
}

• package.json完成配置后，然后实现Gruntfile.js的配置

module.exports=function(grunt){
    grunt.initConfig({
        pkg:grunt.file.readJSON("package.json"),
        sprite:{
            options:{
                banner:'/*<%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd")%>*/\n'
            },
            all:{
                src:"sprite/*.png",
                destImg:"spritesheet/spritesheet.png",
                destCSS:"css/sprite.css",
                algorithm:"binary-tree"
            }
        }
    });
    grunt.loadNpmTasks("grunt-spritesmith");
    grunt.registerTask("default",["sprite"]);
};