前言

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

      A、因為現(xiàn)在流行node.js，都在使用構(gòu)建工具

      B、讓前端開發(fā)變得高大上，和后端一樣編譯才能運(yùn)行

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

選擇A、B請直接關(guān)閉此文，選擇C請繼續(xù)閱讀。

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

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

png sprite
 

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

手動操作

有的公司甚至讓UI設(shè)計師來合并小圖標(biāo)（UI設(shè)計師成了自動化工具，