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

安装依赖

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;}

转载于:https://www.cnblogs.com/gopark/p/8253749.html