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