使用grunt生成雪碧圖

　　做爲一名前端開發人員，實現前端自動化是一項大大節省開發時間的有效手段；

這樣開發人員能夠更好更專一於前端代碼的開發，而不用過多關注於css壓縮，js

檢測這樣的繁瑣的工做。

　　本文主要介紹使用grunt實現前端雪碧圖生成，以及生成相應的css文件，

• 安裝grunt，這部分就很少說了，具體內容參考http://www.gruntjs.net/

grunt首頁詳細介紹了grunt的安裝步驟以及基本的使用基礎。

• 安裝完成grunt後，下一步驟就是完成基本的配置工做，主要工做就是實現package.json文件，

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

• package.json的配置：

 1 {
 2     "name": "grunt-spritesmith",
 3     "description": "Grunt task for converting a set of images into a spritesheet and corresponding CSS variables.",
 4     "version": "0.0.1",
 5     "repository": {
 6         "type": "git",
 7         "url": "git://github.com/itec-primary/grunt-spritesmith.git"
 8     },
 9 
10     "engines": {
11         "node": ">= 0.8.0"
12     },
13     "scripts": {
14         "test": "cd src-test && grunt"
15     },
16     "dependencies": {
17         "grunt-spritesmith": ">0.1.0"
18     },
19     "devDependencies": {
20         "grunt": "~0.4.2"
21 
22     },
23     "keywords": [
24         "grunt",
25         "sprite",
26         "spritesmith"
27     ]
28 }

• package.json完成配置後，而後實現Gruntfile.js的配置

 1 module.exports=function(grunt){
 2     grunt.initConfig({
 3         pkg:grunt.file.readJSON("package.json"),
 4         sprite:{
 5             options:{
 6                 banner:'/*<%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd")%>*/\n'
 7             },
 8             all:{
 9                 src:"sprite/*.png",
10                 destImg:"spritesheet/spritesheet.png",
11                 destCSS:"css/sprite.css",
12                 algorithm:"binary-tree"
13             }
14         }
15     });
16     grunt.loadNpmTasks("grunt-spritesmith");
17     grunt.registerTask("default",["sprite"]);
18 };