前景
最近在做webapp项目，一直都比较少的使用到雪碧图，最近有个需求就是减少小图片的请求数量。看到这需求 毫无疑问 前端需要使用到雪碧图，简单的说就是把一些甚至全部的图片都放在一张大图里面，当然需要注意最后生成的图片的大小，太大了也不好。
工具
- gulp
- gulp.spritesmith
实现
var spritesmith=require("gulp.spritesmith");
gulp.task("sprite",async function () {
return gulp.src("activity_pingtuan/img/*.png")
.pipe(spritesmith({
imgName:'sprite.png',
cssName:'css/sprite1.css',
padding:10,
algorithm:'binary-tree'
}))
.pipe(gulp.dest('dist/'))
})
- 安装gulp， gulp.spritesmith 这里就不多做介绍了可以自行百度（注意需要安装全局的gulp。）
- 编写gulp任务
var spritesmith=require("gulp.spritesmith");
gulp.task("sprite",async function () {
return gulp.src("src/img/*.png")
.pipe(spritesmith({
imgName:'sprite.png',
cssName:'css/sprite.css',
padding:10,
algorithm:'binary-tree'
}))
.pipe(gulp.dest('dist/'))
})
- 执行gulp sprite命令，然后就可以看到生成的雪碧图和对应的css样式了如下图
好这样就结束了， 呃 呃 呃 呃 呃 呃 。。rem呢。
对了这样默认生成的是通过px定位找到相应的图片的。如果需要生成rem定位还得修改下gulp.spritesmith这个插件。好，我们来找找这个插件在哪里，打开node_modules文件夹在下面找到 spritesheet-templates这个目录，
如下图
首先我们打开spritesheet-templates.js这个文件下的
px[key] = item[key] + 'px';注释掉然后修改成 px[key] = item[key]/100 + 'rem'; 这里的除以100是px对应转换为rem的比例。具体看自己项目中是多少就是多少。
好我们现在再次执行gulp sprite 查看生成的css 发现里面的单位都修改成rem了。（注意这样修改的话 如果是多人协作 需要每个人都自己改一次，不然都是下载的新的插件。）
但是我们直接使用了以后发现找到的位置都不对。为什么呢。
发现用rem的时候雪碧图的整张大小是一定的，也就是说需要用rem设置下整张雪碧图的大小，雪碧图大小在生成的时候我们是知道的，所以找到css.template.handlebars文件，在如图所示的位置加上一个新的class
重新执行 gulp sprite 这时候我们就使用雪碧图了。
使用方法如下（每个需要使用的地方都需要先带上cicon这个类）
<i class="cicon icon-home"></i>