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

 

ispriter自動構建css-sprite