Grunt中批量無損壓縮圖片插件－－grunt-sprite

時間 2019-11-30

標籤 grunt 批量無損壓縮圖片插件 sprite 欄目 Node.js 简体版

原文原文鏈接

這是什麼

這是一個幫助前端開發工程師將css代碼中的切片合併成雪碧圖的工具，它的主要功能是：css

使用二叉樹排列算法，對css文件進行處理，收集切片序列，生成雪碧圖
在原css代碼中爲切片添加background-position屬性
生成用於高清設備的高清雪碧圖，並在css文件末尾追加媒體查詢代碼
在引用雪碧圖的位置打上時間戳
在樣式末尾追加時間戳

安裝依賴

grunt-sprite 使用 spritesmith 做爲內部核心算法，根據官方文檔中提到的基本依賴，需要安裝Graphics Magick(gm) 和 PhantomJS 兩個依賴。html

Graphics Magick(gm)前端

GraphicsMagick 爲 grunt-sprite 提供用於圖像處理的框架，安裝方法：git
- Macgithub
```
// 安裝GM圖形庫    
  brew install GraphicsMagick
```
- Windows算法
  
  前往官方網站下載安裝GM圖形庫npm
PhantomJS框架

PhantomJS 爲 spritesmith 提供 CSS選擇器與 JSON 的支持，安裝方法：grunt
- Mac工具
```
// 安裝 Phantomjs
  brew install phantomjs
```
- Windows
  
  前往官方網站下載安裝Phantomjs

配置說明

// 自動雪碧圖
  sprite: {
      allslice: {
          files: [
              {
                  //啓用動態擴展
                  expand: true,
                  // css文件源的文件夾
                  cwd: 'css',
                  // 匹配規則
                  src: ['*.css'],
                  //導出css和sprite的路徑地址
                  dest: 'tmp/',
                  // 導出的css名
                  ext: '.sprite.css'
              }
          ],
          options: {
                        // 默認使用GM圖像處理引擎
                        'engine': 'gm',
                        // 默認使用二叉樹最優排列算法
                        'algorithm': 'binary-tree',
                        // 給雪碧圖追加時間戳，默認不追加
                        'imagestamp':false,
                        // 給樣式文件追加時間戳，默認不追加
                        'cssstamp':true,
                        // 是否以時間戳爲文件名生成新的雪碧圖文件，默認不生成新文件
                        'newsprite':true

                    }
      }
  }

files

使用標準的動態文件對象

dest 指定一個輸出的目錄，將會在這個目錄下建立一個css/和一個sprite/目錄。

options
- engine
  
  必選項，指定圖像處理引擎，選擇gm
- algorithm
  
  必選項，指定排列方式，有top-down （從上至下）, left-right（從左至右）, diagonal（從左上至右下）, alt-diagonal （從左下至右上）和 binary-tree（二叉樹排列）五種供選擇。
- imagestamp
  
  可選項，是否要給雪碧圖追加時間戳，默認不追加
- cssstamp
  
  可選項，是否給樣式文件追加時間戳，默認不追加
- 'newsprite'
  
  可選項，是否以時間戳爲文件名生成新的雪碧圖文件，默認不生成新文件

載入插件

請不要忘了載入插件

grunt.loadNpmTasks('grunt-sprite');

打個比方

有一個相似這樣的目錄結構：

├── test                
        ├── css/    
            └── icon.css        
        ├── slice/  
                ├── icon-a.png
                ├── icon-a@2x.png       
                ├── icon-b.png
                └── icon-b@2x.png
        └── publish
            ├── css/
                └── icon.sprite.css
            └── sprite/ 
                ├── icon.png
                └── icon@2x.png

css/icon.css 調用slice/目錄下的切片，grunt-sprite 會將 css/icon.css 進行處理。

在publish/ 目錄下生成 css/ 和 sprite/ 兩個目錄，css/ 目錄下是處理完成的樣式 icon.sprite.css ，而sprite/ 目錄下是合併完成的雪碧圖 icon.png。