安装依赖
yarn add gulpyarn 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;}