ispriter自動構建css-sprite

夕陽白雪發表於2014-07-27

優化你的網站:

 當一個網站中的資源(比如: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

 


相關文章