用gulp生成雪碧图

参考俩：https://www.cnblogs.com/qianlitiaotiao/p/5054231.html

CSS雪碧 即CSS Sprites，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
雪碧图的有点：
1.将多张图片合并到一张图片中，可以减小图片的总大小
2.将多巡航图片合并到一张图片后，只需要一次网络请求就可以将所需要的资源全部下载，减少建立连接的消耗，在移动端有位明显。

gulp多张图片自动合成雪碧图：（需要用到gulp.spritesmith）

前期准备：
安装gulp
后台命令安装 gulp插件 ：
npm install --save-dev gulp.spritesmith 安装 gulp.spritesmith
Gulpfile.js 文件内容

//引入gulp
var gulp=require("gulp"),
spritesmith=require('gulp.spritesmith');

gulp.task('default', function () {
return gulp.src('images/*.png')//需要合并的图片地址
.pipe(spritesmith({
imgName: 'sprite.png',//保存合并后图片的地址
cssName: 'css/sprite.css',//保存合并后对于css样式的地址
padding:5,//合并时两个图片的间距
algorithm: 'binary-tree',//注释1
cssTemplate:"css/handlebarsStr.css"//注释2
}))
.pipe(gulp.dest('dist/'));
});
注释一：

Algorithm 有四个可选值分别为top-down、left-right、diagonal、alt-diagonal、binary-tree
对于如下：

注释二：
cssTemplate 是生成css的模板文件可以是字符串也可以是函数。是字符串是对于相对于的模板地址 对于模板文件样式格式是：

如果是函数的话，这可以这样写: