Node.js:處理多層目錄檔案(Gulp、mozjpeg 批次圖片壓縮 - 延伸篇)

2019/03/30 574 0 多媒體 , 網站技術 , JavaScript , Node.js , 靜圖處理 , Gulp

最近正在運用《Node.js:Gulp 運行 imagemin-mozjpeg,mozjpeg 批次圖片壓縮》這篇文章的技術幫整個萌芽系列網站進行圖片壓縮,不過有注意到雖然可以篩選掉非「.jpg」的圖片,卻不能多層目錄一起處理,因為早期我網站的圖庫安排是「年份/月份/圖檔.jpg」,因此就靈機一動採用了 JavaScript Array forEach 的方式達成!

這次示範專案目錄是在使用者目錄下的「imagemin-mozjpeg」,本文使用以下路徑,因為完整路徑太長,就省略部分路徑囉!

C:\Users\user\imagemin-mozjpeg
├─📝 gulpfile.js
├─📝 package.json
..├─📁 src
....├─📁 1970
......├─📁 01
........└─🖼 輸入圖檔.jpg
....├─📁 2013
......├─📁 01
........└─🖼 輸入圖檔.jpg
......├─📁 11
........└─🖼 輸入圖檔.jpg
......├─📁 12
........└─🖼 輸入圖檔.jpg
~~~省略~~~
..├─📁 build
....├─📁 1970
......├─📁 01
........└─🖼 輸出圖檔.jpg
....├─📁 2013
......├─📁 01
........└─🖼 輸出圖檔.jpg
......├─📁 11
........└─🖼 輸出圖檔.jpg
......├─📁 12
........└─🖼 輸出圖檔.jpg
~~~省略~~~

基本上不是每年份都有 1 ~ 12 月份的資料,不過這不成問題,Gulp 在執行時會自動忽略無資料的部分,我們只要將工作流程寫好就可以了!

▲ 「gulpfile.js」工作流程檔,這邊請使用 IDE(建議:VS Code)開啟檔案並編輯:

//  套件定義
//  在 package.json 內引用的套件

const gulp = require('gulp');
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

// 建構工作
const mozjpeg = async () => {
  var year = new Array('1970', '2013', '2014', '2015', '2016');
  var month = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
  for (var y in year) {
    for (var m in month) {
      await imagemin(['src/' + year[y] + '/' + month[m] + '/*.jpg'], 'build/' + year[y] + '/' + month[m] + '/', {
        use: [
          imageminMozjpeg({
            quality: 85
          })
        ]
      });
    };
  };
  console.log('Images optimized');
};

// 輸出工作

exports.default = gulp.series(mozjpeg);

【說明】利用雙個陣列儲存年份、月份,再運用雙 forEach 迴圈來取用資料,這樣輸入路徑和輸出路徑也能達到同步的功能!這邊將用 mozjpeg 品質 85 批次圖片壓縮,一次處理大約接近 3000 張圖,處理約半分鐘。
【執行】在終端機指定好路徑後輸入指令gulp即可執行。

▲ 檔案依照對應路徑輸出,完全沒有例外!程式會自動忽略空目錄與不對的格式(如:.gif),最終可以順利完成圖片壓縮!

Node.js 系列教學文章

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇