作為前端構(gòu)建工具不可或缺的一個環(huán)節(jié)，自動生成css sprites圖片不僅僅能夠減少頻繁的人工操作，還能夠避免多人協(xié)作時對同一個sprites圖片維護過程中因個人原因引起的圖片不規(guī)范問題。58到家前端工程化解決方案boi的自動css sprites功能基于webpack實現(xiàn)，本文記錄一下實現(xiàn)方案的各個細節(jié)以及需要注意的地方。
1. 功能需求
css sprites的功能需求簡單說就是將style中引用的散列小圖標合并成一張sprites圖片。從功能角度來講比較單一，從實現(xiàn)角度來講需要具備以下幾點：
對style文件進行資源依賴分析，能夠得出style中引用的圖片資源；
style文件引用的圖片并非都是圖標，其他的比如背景圖等資源不應(yīng)該被sprites合并。所以必須有明確的標識可以區(qū)分圖標與非圖標資源。
對于第一點，webpack本身就具備依賴分析的功能，所以無需自行實現(xiàn)。那么如何設(shè)計明確的標識以便區(qū)分資源類型呢？
2. 用戶至上的設(shè)計原則
上文提到的資源標識，我們首先看一下業(yè)內(nèi)的同類產(chǎn)品是如何實現(xiàn)的。以fis為例，請看以下代碼：
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式