生成sprite图像的代码本文中的样式预处理使用了stylus。如果需要使用其他类型的预处理器，可以修改如下代码。如果想更深入的了解sprite图片的生成原理和参数，请移步spritesmithgulp.spritesmithconstspritesmith=require("gulp.spritesmith");gulp.task("sprite",()=>{varspriteData=gulp.src("./src/styles/img/icons/*.png").pipe(spritesmith({//生成的Sprite图片的位置和名称imgName:"img/sprite.png",//stylelocationofthegeneratedSpriteimagecssName:"__sprite.styl",//Spriteimagepaddingpadding:5,//Arrangementofimagesinthespriteimagealgorithm:"binary-tree",//这里是生成__sprite.styl的模板文件，对于没有图片的样式预处理器需要单独修改cssTemplate(data){varfuc=[];varperSprite=[];varshared="sicon(){background-图片：url(I)；显示：内联块；垂直对齐：中间；位置：相对；顶部：-2px；背景大小：WpxHpx；}".replace("I",data.spritesheet.image).replace("W",data.spritesheet.width).replace("H",data.spritesheet.高度）;Array.prototype.forEach.call(data.sprites,函数(sprite){fuc.push("sicon-N(){width:Wpx;height:Hpx;background-position:XpxYpx;}".replace(/N/g,sprite.name).replace("W",sprite.width).replace("H",sprite.height).replace("X",sprite.offset_x).replace("Y",sprite.offset_y));perSprite.push("\t.sicon-N{\t\n\t\tsicon-N()\t\n\t}".replace(/N/g,sprite.name));});return(shared+'\n'+fuc.join("\n")+"\nsprites(){\n\t"+".sicon{\n\t\tsicon()\n\t}"+"\n"+perSprite.join("\n")+"\n}");}}));返回spriteData.pipe(gulp.dest("./src/styles"));});这段代码会在指定位置生成__sprite.styl函数集合文件生成的__sprite.styl格式如下（生成的格式取决于cssTemplate的内容）：sicon(){background-image:url(img/精灵.png);显示：内联块；垂直对齐：中间；位置：相对；顶部：-2px；background-size:286px256px;}sicon-checkbox-checked-focus(){width:17px;高度：17px；background-position:-22px-220px;}sprites(){.sicon{sicon()}.sicon-checkbox-checked-focus{sicon-checkbox-checked-focus()}}使用全局使用可以调用sprites()函数在入口处生成全局样式。本地使用可以调用对应图片的函数和public函数如下：.xxx{sicon()sicon-checkbox-checked-focus()}最后希望对大家有用。我平时不喜欢写文章。能写的更实用。
