雪碧图移动端rem适配（安卓雪碧图）

前景

最近在做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>