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張以內生成然後再合成。