安装：

[cc]
npm install gulp.spritesmith –save-dev
[/cc]

设置：
[cc lang=”css”]
img: [‘src/img/**/*.*’,’!src/img/**/sprite/**/*.*’],
sprite_src:’src/img/’ + current_folder +’/sprite/**/*.*’,
sprite_img:’src/img/’ + current_folder + ‘/’,
sprite_scss:’src/sass/’ + current_folder + ‘/’
[/cc]

[cc lang=”js”]

gulp.task(‘sprite’,function() {
gulp.src(paths.src.sprite_src)
.pipe(spritesmith({
imgName: paths.src.sprite_img + ‘sprite.png’, //合并后大图的名称
cssName: paths.src.sprite_scss + ‘_sprite.scss’,
algorithm:’binary-tree’,
padding: 10,
cssTemplate: function (data) {

// data为对象，保存合成前小图和合成打大图的信息包括小图在大图之中的信息
var arr = [],
width = data.spritesheet.px.width,
height = data.spritesheet.px.height,
// url = data.spritesheet.image;
url = ‘#{$imgurl}sprite.png’;

data.sprites.forEach(function (sprite) {
var rs = 2;//相同元素设计稿与scss具体数值的比例，如750px设计稿，写scss以1x来写，即此参数设定为2, 同理sketch 本身是1x设计图，则rs = 1;
var className = sprite.name.indexOf(“%”) != -1 ? sprite.name : “.” + sprite.name; //以%开头的文件名，作为@extend供引用

arr.push(
className +
“{” + “\n” +
“display:inline-block;” + “\n” +
“background: url(‘” + url + “‘) ” +
“no-repeat (” +
sprite.px.offset_x + ” / ” + rs + “)” + ” (” + sprite.px.offset_y + ” / ” + rs + “)” + “;” + “\n” +
“background-size: (” + width + ” / ” + rs + “)” + ” (” + height + ” / ” + rs + “)” + “;” + “\n” +
“width: (” + sprite.px.width + ” / ” + rs + “)” + “;” + “\n” +
“height: (” + sprite.px.height + ” / ” + rs + “)” + “;” + “\n” +
“}\n”
)
});
// return “@fs:108rem;\n”+arr.join(“”)
return arr.join(“”)
}
}))
.pipe(gulp.dest(”));
});

[/cc]

1. 同时执行sprite和img，有可能最终dest得到一张半截的图，是因为sprite在生成过程中，img已将半截图给更新到了dest; 暂时将sprite (如用命令：gulp sprite)单独执行。
2. 图片命名即生成类名；
3. 图片名若包含有%，例如%filename，则生成的scss会是以%filename作为类名，供sass @extend方法引用。