说明
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 (sprite) {
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', function () {
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
生成一倍精灵图