一、前提
- 使用gulp工具
- 将需要合成精灵图的图片放到一个文件夹内方便操作
- 合成图片较大推荐一个压缩网站
https://tinypng.com/
二、使用
下载精灵图插件npm install --save-dev gulp.spritesmith
在gulp.js文件里面
var spritesmith=require('gulp.spritesmith'); //引入雪碧图合成插件
gulp.task('imgSprite', function (done) {
gulp.src('public/statics/output/images/v6_images/news/summit/banner/*.png')//需要合成精灵图的文件夹地址
.pipe(spritesmith({
imgName: 'banners_sprite.png', //保存合并后的名称
cssName: 'css/sprite.css', //保存合并后css样式的地址
padding: 0, //合并时两个图片的间距
algorithm: 'left-right', // Algorithm 有五个可选值分别为:top-down、left-right、diagonal、alt-diagonal、binary-tree
cssTemplate: function (data) { //如果是函数,这样写
var arr = [];
var i = 0;
arr.push(" keyframes run {\n");
data.sprites.forEach(function (sprite) {
arr.push(
i + "%{" +
"background-position: " + sprite.px.offset_x + " " + sprite.px.offset_y + ";"
+ "}\n"
);
i++;
});
arr.push("}\n")
return arr.join("");
}
}))
.pipe(gulp.dest('public/statics/output/images/v6_images/news/summit/')) //输出目录,精灵图生成地址
.on('end', done);
});
gulp imgSprite执行命令生成你所需要顺序精灵图片即可
三、注意
精灵图合成的文件夹若是以数字命名,超过10,顺序就可能乱掉,建议10张以内生成然后再合成。