最近一直在做移动端，用雪碧图减少一个页面的图片的请求次数，能加快页面的加载速度就一定要加快。做之前呢，首先想到的就是用PS将所有的小图放在一张大图上，可那么多的小图，一张一张往上放，岂不累趴，而且你还没有办法去确切的计算整张雪碧图的宽高，这不搞死人吗？于是就上网查资料，然后就有了本文很简单的生成雪碧图的方法。
这种方法是基于gulp的。以下就是详细的实现代码：
配置gulpfile.js
//引入gulp模块
var gulp=require('gulp');
//引入雪碧图合成插件
var spritesmith=require('gulp.spritesmith');
gulp.task('default',function(){
gulp.src('images/*.png')
.pipe(spritesmith({
imgName:'images/sprite.png', //保存合并后的名称
cssName:'css/sprite.css', //保存合并后css样式的地址
padding:2, //合并时两个图片的间距
algorithm:'binary-tree', //注释1
//cssTemplate:'css/handlebarsStr.css' //注释2
cssTemplate:function(data){ //如果是函数的话，这可以这样写
var arr=[];
data.sprites.forEach(function (sprite){
arr.push("."+sprite.name+
"{"+
"background-image: url('"+sprite.escaped_image+"');"+
"background-repeat: no-repeat;"+
"background-position: "+sprite.px.offset_x+" "+sprite.px.offset_y+";"+
"background-size: "+sprite.px.width+" "+sprite.px.height+";"+
"width: "+sprite.px.width+";"+
"height: "+sprite.px.height+";"+
"}\n");
});
return arr.join("");
}
}))
.pipe(gulp.dest('dest/')); //输出目录
});
关于代码中的注释部分作出以下详解：
注释1：
Algorithm 有四个可选值分别为：top-down、left-right、diagonal、alt-diagonal、binary-tree
对应如下：
注释2：
cssTemplate是生成css的模板文件，可以是字符串也可以是函数。是字符串是对于相对于的模板地址，对于模板文件样式格式是：
在cssTemplate中导入handlebarsStr.css文件，这种方法相对简单。
配置handlebarsStr.css
{{#sprites}}
.icon-{{name}}{
background-image: url({{escaped_image}});
background-repeat: no-repeat;
background-position: {{px.offset_x}} {{px.offset_y}};
background-size: {{px.width}} {{px.height}};
width: {{px.width}};
height: {{px.height}};
}
{{/sprites}}
个人认为，还是这种方法比较简单实现。
需要要合成的图片：
合成成功：
本文部分内容出自：
http://www.cnblogs.com/yanxinhua/p/6816141.html
来源：https://www.cnblogs.com/tnnyang/p/7131535.html
