前言：
css Sprites指的是网页图片的一种处理技巧，通常是将一些体积小的不常更换的图片进行处理，目的是为了减少HTTP请求次数，也是优化必不可少的工作。
这里是对自己在gulp中合成雪碧图的一些的经验和总结！
gulp中用于合成雪碧图的模块有许多，我只是针对gulp-css-spriter和gulp.spritesmith这两个做了尝试，在尝试过程中发现写对css文件和images文件路径是关键问题，只有把路径配对了那几乎没有啥问题了。
gulp-css-sprite
tip:这个模块很久没有更新了，下载量也很小，了解一下即可，可以有时候也是可以用到的.
首页看一下目录结构方便对照观察了解：
var gulp=require("gulp"),
spriter=require('gulp-css-spriter');
gulp.task('sprite',function(){
var timestamp= + new Date();//生成时间戳
gulp.src('src/spriteTest/css/test.css')
.pipe(spriter({
// 生成的spriter的位置
'spriteSheet':'src/spriteTest/dist/images/sprite_'+timestamp+'.png',
// 生成样式文件图片引用地址的路径
'pathToSpriteSheetFromCSS':'../images/sprite_'+timestamp+'.png'
}))
//图片合并后css文件中图片名也响应替换掉输出的css文件的目的地址
.pipe(gulp.dest('src/spriteTest/dist/css/'));
/*.pipe(autoprefixer({
browsers:['last 2 Chrome versions', 'Safari >0', 'Explorer >0', 'Edge >0', 'Opera >0', 'Firefox >=20'],
cascade:false,
remove:false
}))*/
});
说明在编译css的时候背景图都加了一个参数用了说明是要css sprite的；
例如test.css文件中添加了"？__spriter"用来标识是要替换的
.icon1:after {
background: url("../images/icon1.png?__spriter") no-repeat center center;
}
.icon2:after {
background: url("../images/icon2.png?__spriter") no-repeat center center;
}
.icon3:after {
background: url("../images/icon3.png?__spriter") no-repeat center center;
}
.icon4:after {
background: url("../images/icon4.png?__spriter") no-repeat center center;
}当你在npm install gulp-css-sprite --save-dev下该模块时是默认不加标识的，从网上了解到修改该模块可以加上标识，这里就不具体说明了，可以参考如下博文自行修改：
gulp.spritesmith
spritesmith的作用就是拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON。
这个模块不需要事先写一个css文件然后根据css去寻找图片进行合并，这个模块是将希望合并的小图先进行合并然后根据cssTemplate去生成css文件
先看文件目录：
//雪碧图gulp.spritesmith
gulp.task('spritesmith',['clean'],function(){
return gulp.src('src/spriteTest/images/*.png')
.pipe(spritesmith({
imgName:'images/sprite20161010.png', //保存合并后图片的地址
cssName:'css/sprite.css', //保存合并后对于css样式的地址
padding:20,
algorithm:'binary-tree',
cssTemplate:"src/spriteTest/handlebarsStr.css"
}))
.pipe(gulp.dest('//雪碧图gulp.spritesmithgulp.task('spritesmith',['clean'],function(){
return gulp.src('src/spriteTest/images/*.png')
.pipe(spritesmith({
imgName:'images/sprite20161010.png', //保存合并后图片的地址
cssName:'css/sprite.css', //保存合并后对于css样式的地址
padding:20,
algorithm:'binary-tree',
cssTemplate:"src/spriteTest/handlebarsStr.css"
}))
.pipe(gulp.dest('src/spriteTest/dist'));})'));
})说明一下路径问题：
1.imgName上写的路径是相对于输出路径（gulp.dest）,上述代码输出的路径实际是：
"src/spriteTest/dist/images/sprite20161010.png"
2.同理cssName的输出路径也是一样的：
"src/spriteTest/dist/css/sprite.css"
-~v~- 如果不注意这些路径会不容易找见生成的文件滴！
spritesmith的参数说明：
algorithm:如何排布合并图片，默认是：“binary-tree”
可选参数有：top-down、left-right、diagonal、alt-diagonal、binary-tree
-
cssTemplate 值为String或者Function
cssTemplate用了渲染出css文件官网给的一个简单demo:
Template String:
{{#sprites}}
.icon-{{name}}:before {
display: block;
background-image: url({{{escaped_image}}});
background-position: {{px.offset_x}} {{px.offset_y}};
width: {{px.width}};
height: {{px.height}};
}
{{/sprites}} 输出的为：
.icon-fork:before {
display: block;
background-image: url(sprite.png);
background-position: 0px 0px;
width: 32px;
height: 32px;
}
.icon-github:before {
/* ... */Template function的demo：
// var yaml = require('js-yaml');
{
imgName: 'sprite.png',
cssName: 'sprite.yml',
cssTemplate: function (data) {
// Convert sprites from an array into an object
var spriteObj = {};
data.sprites.forEach(function (sprite) {
// Grab the name and store the sprite under it
var name = sprite.name;
spriteObj[name] = sprite;
// Delete the name from the sprite
delete sprite.name;
});
// Return stringified spriteObj
return yaml.safeDump(spriteObj);
}
}输出为：
fork:
x: 0
"y": 0
width: 32
height: 32
source_image: /home/todd/github/gulp.spritesmith/docs/images/fork.png
image: sprite.png
total_width: 64
total_height: 64
escaped_image: sprite.png
offset_x: -0.0
offset_y: -0.0
px:
x: 0px
"y": 0px
offset_x: 0px
offset_y: 0px
height: 32px
width: 32px
total_height: 64px
total_width: 64px
github:
# ...