說明

1.本教程預設你已經安裝好gulp(不會的自行搜尋安裝教程)

2.src原始碼目錄，dist為線上正式目錄

專案結構為：

icons:存放一倍圖；[email protected]:存放二倍圖

安裝外掛 spritesmith

配置gulpfile.js

//引入gulp

var gulp=require("gulp"),

spritesmith=require('gulp.spritesmith');

//輸出原圖

gulp.task('sprite', function () {

return gulp.src('src/static/images/icons/*.png')

.pipe(spritesmith({

imgName: '/static/images/sprite.png',//儲存合併後圖片的地址

cssName: '/static/css/sprite.css',//儲存合併後對於css樣式的地址

//css background-image: url地址

imgPath: '/dist/static/images/sprite/sprite.png',

padding:5,//合併時兩個圖片的間距

algorithm: 'binary-tree',//排列方式

cssTemplate: function (data) {

var arr=[];

data.sprites.forEach(function

arr.push(".icon-"+sprite.name+

"{"+

"background-image: url('"+sprite.escaped_image+"');"+

"background-position: "+sprite.px.offset_x+"px "+sprite.px.offset_y+"px;"+

"width:"+sprite.px.width+";"+

"height:"+sprite.px.height+";"+

"}\n");

});

return arr.join("");

}

}))

.pipe(gulp.dest('dist/'));

});

//輸出兩倍圖

gulp.task('sprite2x'

return gulp.src('src/static/images/[email protected]/*.png')//需要合併的圖片地址

.pipe(spritesmith({

imgName: 'static/images/[email protected]', //儲存合併後圖片的地址

cssName: 'static/css/[email protected]',//儲存合併後對於css樣式的地址

imgPath: '/gulp/dist/static/images/[email protected]',//css background-image: url地址

padding:5,//合併時兩個圖片的間距

algorithm: 'binary-tree',//排列方式

cssTemplate: function (data) {

var arr=[];

data.sprites.forEach(function (sprite) {

console.log(sprite);

arr.push(".icon-"+sprite.name+

"{"+

"background-image: url('"+sprite.escaped_image+"');"+

"background-size:"+(parseFloat(sprite.px.total_width)/2)+"px "+(parseFloat(sprite.px.total_height)/2)+"px;"+

"background-position: "+(parseFloat(sprite.px.offset_x)/2)+"px "+(parseFloat(sprite.px.offset_y)/2)+"px;"+

"width:"+(parseFloat(sprite.px.width)/2)+"px;"+

"height:"+(parseFloat(sprite.px.height)/2)+"px;"+

"}\n");

});

return arr.join("");

}

}))

.pipe(gulp.dest('dist/'));

});

執行gulp sprite2x 

生成移動端2倍精靈圖；

執行gulp sprite

生成一倍精靈圖