利用gulp 插件gulp.spritesmith 完成小图合成精灵图，并自动输出样式文件

安装依赖

yarn add gulp

yarn add gulp.spritesmith

本次依赖的版本是：

"gulp": "^3.9.1"

"gulp.spritesmith": "^6.5.1"

gulpfile.js的配置

const gulp = require("gulp")

// 本实例为完成精灵图的合并

const spritesmith = require("gulp.spritesmith")

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

    gulp.src("images/*.png")

        .pipe(spritesmith({

            imgName:'images/sprite.png', //合并后大图的名称

            cssName:'css/sprite.less',

            padding:2,// 每个图片之间的间距，默认为0px

            cssTemplate:(data)=>{

            // data为对象，保存合成前小图和合成打大图的信息包括小图在大图之中的信息

               let arr = [],

                    width = data.spritesheet.px.width,

                    height = data.spritesheet.px.height,

                    url =  data.spritesheet.image

                // console.log(data)

                data.sprites.forEach(function(sprite) {

                    arr.push(

                        ".icon-"+sprite.name+

                        "{"+

                            "background: url('"+url+"') "+

                            "no-repeat "+

                            sprite.px.offset_x+" "+sprite.px.offset_y+";"+

                            "background-size: "+ width+" "+height+";"+

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

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

                        "}\n"

                    )

                })

                // return "@fs:108rem;\n"+arr.join("")

                return arr.join("")

            }

        }))

        .pipe(gulp.dest("dest/"))

})

　　

　　

未合并前的效果

小图文件未合并前的效果如下(小图一共40张)

合并之后的效果：图片与less

图片：

less:

.icon-aim{background: url('../images/sprite.png') no-repeat -34px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-behance{background: url('../images/sprite.png') no-repeat 0px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-blogger{background: url('../images/sprite.png') no-repeat 0px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-deviant-art{background: url('../images/sprite.png') no-repeat -34px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-digg{background: url('../images/sprite.png') no-repeat -68px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-dribbble{background: url('../images/sprite.png') no-repeat -68px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-dropbox{background: url('../images/sprite.png') no-repeat 0px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-etsy{background: url('../images/sprite.png') no-repeat -34px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-evernote{background: url('../images/sprite.png') no-repeat -68px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-facebook{background: url('../images/sprite.png') no-repeat -102px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-feed{background: url('../images/sprite.png') no-repeat -102px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-flickr{background: url('../images/sprite.png') no-repeat -102px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-forrst{background: url('../images/sprite.png') no-repeat 0px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-foursquare{background: url('../images/sprite.png') no-repeat -34px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-github{background: url('../images/sprite.png') no-repeat -68px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-google+{background: url('../images/sprite.png') no-repeat -102px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-google{background: url('../images/sprite.png') no-repeat -136px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-instagram{background: url('../images/sprite.png') no-repeat -136px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-last-fm{background: url('../images/sprite.png') no-repeat -136px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-linked-in{background: url('../images/sprite.png') no-repeat -136px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-mail{background: url('../images/sprite.png') no-repeat 0px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-myspace{background: url('../images/sprite.png') no-repeat -34px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-paypal{background: url('../images/sprite.png') no-repeat -68px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-picasa{background: url('../images/sprite.png') no-repeat -102px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-pinterest{background: url('../images/sprite.png') no-repeat -136px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-rdio{background: url('../images/sprite.png') no-repeat -170px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-reddit{background: url('../images/sprite.png') no-repeat -170px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-share-this{background: url('../images/sprite.png') no-repeat -170px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-skype{background: url('../images/sprite.png') no-repeat -170px -102px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-soundcloud{background: url('../images/sprite.png') no-repeat -170px -136px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-spotify{background: url('../images/sprite.png') no-repeat 0px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-stumbleupon{background: url('../images/sprite.png') no-repeat -34px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-tumblr{background: url('../images/sprite.png') no-repeat -68px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-twitter{background: url('../images/sprite.png') no-repeat -102px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-viddlr{background: url('../images/sprite.png') no-repeat -136px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-vimeo{background: url('../images/sprite.png') no-repeat -170px -170px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-wordpress{background: url('../images/sprite.png') no-repeat -204px 0px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-xing{background: url('../images/sprite.png') no-repeat -204px -34px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-yahoo{background: url('../images/sprite.png') no-repeat -204px -68px;background-size: 236px 202px;width: 32px;height: 32px;}

.icon-youtube{background: url('../images/sprite.png') no-repeat -204px -102px;background-size: 236px 202px;width: 32px;height: 32px;}