gulp 制做雪碧图

雪碧图：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