grunt-css-sprite css 代碼中的切片合併

安裝插件：npm install grunt-css-sprite --save-dev

grunt-css-sprite主要功能：
1.對 css 文件進行處理，收集切片序列，生成雪碧圖
2.在原css代碼中爲切片添加background-position屬性
3.生成用於高清設備的高清雪碧圖，並在css文件末尾追加媒體查詢代碼
4.生成高清設備雪碧圖，使用 image-set
5.支持選擇器提取，進一步優化CSS文件大小
6.在引用雪碧圖的位置打上時間戳
7.在樣式末尾追加時間戳
8.按照時間戳命名文件

 

配置說明:

imagepath
必填項，sprite背景圖源文件夾，只有匹配此路徑纔會處理，默認爲images/slice/

imagepath_map
映射css中背景路徑，支持函數和數組，默認爲 null

spritedest
必填項，雪碧圖輸出目錄，注意，會覆蓋以前文件！默認 images/

spritepath
可選項，替換後的背景路徑，默認爲 path.relative(cssDestPath, spriteDestPath);

padding
可選項，指定各圖片間間距，若是設置爲奇數，會強制+1以保證生成的2x圖片爲偶數寬
高，默認 0

useimageset
可選項，是否使用 image-set 做爲2x圖片實現，默認不使用

newsprite
可選項，是否以時間戳爲文件名生成新的雪碧圖文件，若是啓用請注意清理以前生成的文件，默認不生成新文件

spritestamp
可選項，是否給雪碧圖追加時間戳，默認不追加

cssstamp
可選項，是否在CSS文件末尾追加時間戳，默認不追加

engine
可選項，指定圖像處理引擎，默認選擇pngsmith

algorithm
可選項，指定排列方式，有top-down （從上至下）, left-right（從左至右）, diagonal（從左上至右下）, alt-diagonal （從左下至右上）和 binary-tree（二叉樹最優排列算法） 五種供選擇，默認 binary-tree

自動雪碧圖實例：

sprite: {
  options: {
    // sprite背景圖源文件夾，只有匹配此路徑纔會處理，默認 images/slice/
    imagepath: 'img1/',
    // 映射CSS中背景路徑，支持函數和數組，默認爲 null
    imagepath_map: null,
    // 雪碧圖輸出目錄，注意，會覆蓋以前文件！默認 images/
    spritedest: 'img1/',
    // 替換後的背景路徑，默認 ../images/
    spritepath: '../img1/',
    // 各圖片間間距，若是設置爲奇數，會強制+1以保證生成的2x圖片爲偶數寬高，默認 0
    padding: 10,
    // 是否使用 image-set 做爲2x圖片實現，默認不使用
    useimageset: false,
    // 是否以時間戳爲文件名生成新的雪碧圖文件，若是啓用請注意清理以前生成的文件，默認不生成新文件
    newsprite: false,
    // 給雪碧圖追加時間戳，默認不追加
    spritestamp: true,
    // 在CSS文件末尾追加時間戳，默認不追加
    cssstamp: true,
    // 默認使用二叉樹最優排列算法
    algorithm: 'binary-tree',
    // 默認使用`pixelsmith`圖像處理引擎
    engine: 'pixelsmith'
  },
  autoSprite: {
    files: {
      // 啓用動態擴展
      expand: true,
      // css文件源的文件夾
      cwd: 'css/',
      // 匹配規則
      src: '*.css',
      // 導出css和sprite的路徑地址
      dest: 'stylesheets/',
      // 導出的css名
      ext: '.sprite.css'
    }
  }
}

特別注意
1.生成後的雪碧圖將以源 css 文件名來命名
2.僅當CSS中定義url(xxxx)的路徑匹配參數imagepath才進行處理，和具體background，background-imageCSS無關，這裏有區別於grunt-sprite
3.理論上高清切片都應該是源切片尺寸的2倍，因此全部高清切片的尺寸寬和高都必須是偶數
4.理論上全部的切片都應該是 .png 格式，png8 png24 和 png32不限
5.spritesmith 默認只支持png格式

 

參考於https://www.npmjs.com/package/grunt-css-sprite
grunt-sprite:https://www.npmjs.com/package/grunt-sprite