ispriter自動構建css-sprite
優化你的網站:
當一個網站中的資源(比如:js檔案、css檔案、圖片等)很多時必然影響使用者訪問速度,這時候你就需要做網站效能優化,你可以選擇把資源分開放在不同的伺服器上,因為一個資源伺服器最多可以同時下載2-3個資源,多個伺服器就可以同時下載多個檔案,但是這樣就給公司帶來資金問題。一般大家都會想到對資原始檔進行壓縮和合並,這個過程可以使用工具,也可以自動構建。今天我講的就是自動構建壓縮css檔案,合併圖片:
ispriter是一個非常不錯的基於node的工具包,支援css合併壓縮和圖片合併:
特性:
智慧提取 background 的 url 和 position 等資訊
智慧設定被合併圖片的寬高
智慧判斷使用了 background-position(使用px為單位)定位的圖片並重新定位
支援已經合併了的精靈圖再次合併和定位
支援圖片去重
支援限制合併後圖片的大小
支援設定合併後的圖片間距
支援將所有圖片合併為一張, 同時所有 CSS 檔案合併為一個檔案
支援讀取 @import 的樣式表進行處理
支援將所有合併了圖片的 CSS 統一輸出, 減少程式碼量
支援對輸出的 CSS 進行壓縮(使用 clean-css)
支援排除不需要合併的圖片(在 url 後面新增 #unsprite 或者使用 config 檔案來配置)
跳過 background-position 是 right/center/bottom 的圖片
跳過顯式的設定平鋪方式為 repreat 的圖片
跳過設定了 background-size 的圖片
配置檔案:
config.json
{ /** * 工作目錄, 可以是相對路徑或者絕對路徑 * * @optional * @default 執行 ispriter 命令時所在的目錄 * @example * "./": 當前執行目錄, 預設值 * "../": 當前目錄的上一級 * "/data": 根目錄下的 data 目錄 * "D:\sprite": D 盤下的 sprite 目錄 */ "workspace": "./", "input": { /** * 原 cssRoot * 需要進行精靈圖合併的 css 檔案路徑或檔案列表, 單個時使用字串, 多個時使用陣列. * 路徑可使用 ant 風格的路徑寫法 * * @required * @example * "cssSource": "../css/"; * "cssSource": ["../css/style.css", "../css2/*.css"] */ "cssSource": ["./style/*.css"], /** * 排除不想合併的圖片, 可使用萬用字元 * 也可以直接在 css 檔案中, 在不想合併的圖片 url 後面新增 #unsprite, iSpriter 會排除該圖片, 並把 #unsprite 刪除 * * @optional * @example * "ignoreImages": "icons/*" * "ignoreImages": ["icons/*", "loading.png"] */ // "ignoreImages": ["*logo.png"], /** * 輸出的精靈圖的格式, 目前只支援輸出 png 格式, * 如果是其他格式, 也是以PNG格式輸出, 僅僅把字尾改為所指定字尾 * * @optional * @default "png" */ "format": "png" }, "output": { /** * 原 cssRoot * 精靈圖合併之後, css 檔案的輸出目錄 * * @optional * @default "./sprite/css/" */ "cssDist": "./css/", /** * 原 imageRoot * 生成的精靈圖相對於 cssDist 的路徑, 最終會變成合並後的的圖片路徑寫在 css 檔案中 * * @optional * @default "./img/" * @example * 如果指定 imageDist 為 "./images/sprite/", 則在輸出的 css 中會顯示為 * background: url("./images/sprite/sprite_1.png"); * */ "imageDist": "./img/", /** * 原 maxSize * 單個精靈圖的最大大小, 單位 KB, * 如果合併之後圖片的大小超過 maxSingleSize, 則會對圖片進行拆分 * * @optional * @default 0 * @example * 如指定 "maxSingleSize": 60, 而生成的精靈圖(sprite_all.png)的容量為 80KB, * 則會把精靈圖拆分為 sprite_0.png 和 sprite_1.png 兩張 * */ "maxSingleSize": 0, /** * 合成之後, 圖片間的空隙, 單位 px * * @optional * @default 0 */ "margin": 3, /** * 配置生成的精靈圖的字首 * * @optional * @default "sprite_" */ "prefix": "sprite_", /** * 精靈圖的輸出格式 * * @optional * @default "png" */ "format": "png", /** * 配置是否要將所有精靈圖合併成為一張, 當有很多 css 檔案輸入的時候可以使用. * 為 true 時將所有圖片合併為一張, 同時所有 css 檔案合併為一個檔案. * 注意: 此時 maxSingleSize 仍然生效, 超過限制時也會進行圖片拆分 * * @optional * @default false */ "combine": false, /** * 配置是否把合併了圖片的樣式整合成一條規則, 統一設定 background-image, 例如: * .cls1, .cls2{ * background-image: url(xxx); * } * * @optional * @default true */ "combineCSSRule": true, /** * 配置是否壓縮 css 檔案, 將使用 clean-css 進行壓縮, 其值如下: * false: 不進行壓縮; * true: 用 clean-css 的預設配置進行壓縮; * Object{"keepBreaks": true, ... }: 用指定的配置進行壓縮. * * @optional * @default false */ "compress": false } }
操作步驟:
第一步,安裝node,官網:http://nodejs.org/
第二步,安裝ispriter包,npm install ispriter -g
第三步,當前目錄執行 ispriter -c config.json
這時會多出一個檔案,裡面有css檔案和合並之後的image檔案。
詳細內容:https://github.com/iazrael/ispriter
相關文章
- Jenkins + GitHub 自動構建JenkinsGithub
- Jenkins github自動構建JenkinsGithub
- 自動化構建映象:Packer
- iOS 自動構建命令——xcodebuildiOSXCodeUI
- Webpack自動化構建實踐指南Web
- 淺談自動化構建之grunt
- 淺談自動化構建之gulp
- git+jenkins自動構建二GitJenkins
- iOS多target下的自動構建iOS
- Grunt自動化構建環境搭建
- jenkins流水線自動構建配置Jenkins
- iOS自動構建打包釋出指令碼iOS指令碼
- Jenkins自動化前端專案構建Jenkins前端
- Android Jenkins自動化構建之路AndroidJenkins
- 使用Hudson搭建自動構建伺服器伺服器
- 使用Gulp構建前端自動化解決方案前端
- 使用ChatGPT自動構建知識圖譜ChatGPT
- 構建高效的自動化測試框架框架
- 前端自動化:Node 命令列前端自動構建釋出系統前端命令列
- 使用vue構建一個自動建站專案Vue
- Element-UI 中 Make 自動化構建分析UI
- jenkins自動構建前端專案(window,vue)Jenkins前端Vue
- hexo配合github action 自動構建(多種形式)HexoGithub
- 使用Kubernetes 構建自動化平臺
- 如何構建自動化的前端開發流程前端
- Jenkins和maven自動化構建java程式JenkinsMavenJava
- 「移動開發」iuap mobile玩轉前端自動化構建移動開發前端
- 利用fastlane進行專案的自動化構建AST
- Jenkins 構建自動化 .NET Core 釋出映象Jenkins
- 使用gulp編寫常用自動化構建任務
- 中小團隊快速構建SQL自動稽核系統SQL
- 自動平衡二叉樹的構建-AVL樹二叉樹
- Jenkins + Gitee 實現程式碼自動化構建JenkinsGitee
- 【IDL】 自動構建泰森多邊形(Voronoi Polygon)Go
- Slack使用開源元件構建自動驅動Kafka叢集元件Kafka
- 關於自動化構建的思維導圖解析圖解
- Gradle自動化專案構建之快速掌握GroovyGradle
- 教你如何搭建一個自動化構建的部落格