gulp工具生成雪碧图（精灵图）

一、前提

• 使用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张以内生成然后再合成。