作为一名前端开发人员，实现前端自动化是一项大大节省开发时间的有效手段；
这样开发人员可以更好更专注于前端代码的开发，而不用过多关注于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 };
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你了解最新的前端技术。
