前言

在開始本文之前，我們先做一個選擇題：前端開發使用構建工具的目的是什么？

      A、因為現在流行node.js，都在使用構建工具

      B、讓前端開發變得高大上，和后端一樣編譯才能運行

      C、讓自動化工具替代重復的手工操作，比如合并代碼，刷新瀏覽器預覽效果等。

選擇A、B請直接關閉此文，選擇C請繼續閱讀。

其實使用工具的目的就一個： 自動化一些重復操作，提升工作效率。ok，明確了這一點之后再來探究有哪些方式，可以把一堆小圖標合并成一個圖片文件并生成相應的樣式。

按照生成文件和使用方式來看，可以大致分成3類處理方式：

png sprite
 

合成雪碧圖是歷史最悠久最成熟的解決方案，把不同的png小圖標拼接成一張png圖片。

手動操作

有的公司甚至讓UI設計師來合并小圖標（UI設計師成了自動化工具，