雪碧图：sprite 是把多张图片拼到一张图中，提升性能的一种做法。把合并的图片一次性加载到内存中，需要时只渲染一部分。
我们选择gulp.spritesmith插件。
使用gulp时首先要在指定的任务目录下本地安装 gulp及任务需要的gulp插件。
（1）建立package.json文件，可以手动建立。也可以使用 cnpm init，然后在命令行中写（学用命令行）
（2）在指定的任务目录下本地安装gulp及插件: cnpm install gulp --save
cnpm install gulp.spritesmith --save
（3）新建任务文件 gulpfile.js
然后我们就可以在这个文件里写我们的代码了。
我们将任务取名为 sprite，
合成的素材存在imgs文件夹下:
合成后输出的雪碧图名字为 sprite.png，对应的css为sprite.css
输出的存储路径为result文件夹
- 代码第一版：（没有任何设置，最简单的版本）
效果：
对应的sprite.css
- 然后我们可以进一步控制下输出的样式
第二版代码：
其中，padding表示合并时每个图片的间距
algorithm表示合成时的排列方式（有四种）：
cssTemplate引入的是一个.css文件 ，用来设置更多的样式：（＃表示循环）csstemplate.css
效果：
对应的sprite.css
