作為前端構(gòu)建工具不可或缺的一個環(huán)節(jié)，自動生成css sprites圖片不僅僅能夠減少頻繁的人工操作，還能夠避免多人協(xié)作時對同一個sprites圖片維護過程中因個人原因引起的圖片不規(guī)范問題。58到家前端工程化解決方案boi的自動css sprites功能基于webpack實現(xiàn)，本文記錄一下實現(xiàn)方案的各個細(xì)節(jié)以及需要注意的地方。
1. 功能需求
css sprites的功能需求簡單說就是將style中引用的散列小圖標(biāo)合并成一張sprites圖片。從功能角度來講比較單一，從實現(xiàn)角度來講需要具備以下幾點：
- 對style文件進行資源依賴分析，能夠得出style中引用的圖片資源；
- style文件引用的圖片并非都是圖標(biāo)，其他的比如背景圖等資源不應(yīng)該被sprites合并。所以必須有明確的標(biāo)識可以區(qū)分圖標(biāo)與非圖標(biāo)資源。
對于第一點，webpack本身就具備依賴分析的功能，所以無需自行實現(xiàn)。那么如何設(shè)計明確的標(biāo)識以便區(qū)分資源類型呢？
2. 用戶至上的設(shè)計原則
上文提到的資源標(biāo)識，我們首先看一下業(yè)內(nèi)的同類產(chǎn)品是如何實現(xiàn)的。以fis為例，請看以下代碼：
li.list-1::before { background-image: url('./img/list-1.png?__sprite'); } li.list-2::before {
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖
2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
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í)是年輕人改變自己的最好方式