tinypng-script-with-cache 圖片壓縮神器，「過濾重複壓縮」「直接替換源文件」的 tinypng 壓縮腳本

「過濾重複壓縮」

「替換源文件」

「靜默壓縮，不生成冗餘文件」

項目特色

• 【過濾重複壓縮】

  • 自動記錄已被壓縮過的圖片，跳過壓縮，加快進度。
  • 記錄圖片壓縮後的 md5 值，再次運行壓縮腳本時，跳過壓縮。
  • 經過 md5 值比較文件變動，即便「文件遷移」也能自動過濾。
  • 經過 md5 值比較文件變動，即便「使用同名文件替換」也能自動識別，並壓縮，沒有漏網之魚。

• 【替換源文件】

  • 壓縮成功，直接替換源文件，不生成冗餘文件，不須要複製粘貼，移動圖片。
  • 靜默壓縮，對項目無感知，無任何影響。

• 【自動切換 api key】

  • tinypng 申請的 api key 每個月只有 500 次免費壓縮額度。
  • 可設置多個 api key，當某 key 超過使用次數時，自動切換下一個 key 進行壓縮。

• 【壓縮報告】

  • 記錄每一個圖片的壓縮數據，並生成彙總信息。

• 【壓縮安全邊界】

  • 壓縮安全線，當壓縮比例低於該百分比值時，保持源文件，避免過度壓縮，損傷圖片質量。

• 【源碼攜帶詳細備註，自帶測試圖片】

  • 下降源碼閱讀門檻，下降測試門檻，減低使用門檻。
  • 推薦閱讀源碼，打破恐懼，便於定製個性化需求。

項目地址

參數介紹

| 參數名 | 值類型 | 是否必填 | 參數做用 | 默認值 | 推薦值 |
| :------: | :------: | :------: | :------: | :------: | :------: |
| apiKeyList | Array | 必填 | tiny png 的 api key 數組，當其中一個不可用或超過使用次數時，自動切換下一個 key 調用 | 無 | 無 |
| reportFilePath | Number | 非必填 | 壓縮報告文件路徑，記錄圖片的壓縮比例，生產壓縮報告 | 無 | __dirname + '/tinyPngReport.json' |
| md5RecordFilePath | Number | 非必填 | 壓縮後圖片 md5 記錄文件，若是待壓縮圖片的 md5 值存在於該文件，則跳過壓縮，解決「重複壓縮」問題 | 無 | __dirname + '/md5RecordFilePath.json' |
| minCompressPercentLimit | Number | 非必填 | 壓縮安全線，當壓縮比例低於該百分比時，保持源文件，避免圖片過度壓縮，損傷顯示質量 | 0 | 10 |
| createMd5FormOrigin | Boolean | 非必填 | 不進行壓縮操做，只生成現有圖片的 md5 信息，並做爲緩存。用於「初次項目接入」及手動清理冗餘的「圖片md5信息」 | false | false |

參數配置示例

let gulp = require('gulp')  
let tinypng = require('./gulp-tinypng-with-cache')  
  
const projectPath = __dirname + '/test-img' // 測試項目路徑，可經過 test-img-origin 恢復未壓縮前圖片  
const apiKeyList = [  
  // 'XgNgkoyWbdIZd8OizINMjX2TpxAd_Gp3', // 無效 key  
  // 'IAl6s3ekmONUVMEqWZdIp1nV2ItJL1PC', // 無效 key   
 'IAl6s3ekmONUVMEqWZdIp1nV2ItJLyPC', // 有效 key  
]  
  
gulp.task('default', function () {  
  return gulp.src([  
    projectPath + '/**/*.png',  
    projectPath + '/**/*.jpg',  
    projectPath + '/**/*.jpeg',  
    '!/**/node_modules/*', // 忽略無需遍歷的文件，路徑匹配語法參考：https://www.gulpjs.com.cn/docs/getting-started/explaining-globs/  
 ], {  
    base: './', // 對文件使用相路徑，爲了後面覆蓋源文件  
    nodir: true, // 忽略文件夾  
 })  
  .pipe(tinypng({  
    apiKeyList,  
    reportFilePath: __dirname + '/tinypngReport.json', // 不設置，則不進行日誌記錄  
    md5RecordFilePath: __dirname + '/tinypngMd5Record.json', // 不設置，則不進行緩存過濾  
    minCompressPercentLimit: 10, // 默認值爲零，最小壓縮百分比限制，爲保證圖片質量，當壓縮比例低於該值時，保持源文件，避免過度壓縮，損傷圖片質量  
    createMd5FormOrigin: false, // 不進行壓縮操做，只生成現有圖片的 md5 信息，並做爲緩存。用於「初次項目接入」及手動清理冗餘的「圖片md5信息」  
 }))  
  .pipe(gulp.dest('./', { overwrite: true })) // 覆寫原文件  
})

組件集成步驟

• 第一步：npm install -S gulp-tinypng-with-cache
• 第二步：根據示例進行參數配置
• 第三步：gulp

示例運行步驟

• 第一步：cd 到當前項目
• 第二步：npm install
• 第三步：gulp

測試資源

• test-img：圖片壓縮測試目錄
• test-img-origin：測試圖片備份目錄，用於恢復測試

運行效果

壓縮報告

md5 記錄

特別感謝

• 感謝 Gaurav Jassal，本項目改編自他的 gulp-tinypng