用gulp.spritesmith生成一倍和两倍精灵图教程

说明

1.本教程默认你已经安装好gulp(不会的自行搜索安装教程)

2.src源码目录，dist为线上正式目录

项目结构为：

icons:存放一倍图；icons@2x:存放二倍图

安装插件 spritesmith

npm install --save-dev gulp.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/icons@2x/*.png')//需要合并的图片地址

        .pipe(spritesmith({

            imgName: 'static/images/sprite@2x.png', //保存合并后图片的地址

            cssName: 'static/css/sprite@2x.css',//保存合并后对于css样式的地址

            imgPath: '/gulp/dist/static/images/sprite@2x.png',//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

生成一倍精灵图