最近正在運用《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 系列教學文章

• Node-RED：讀取及查詢 MySQL 資料庫中的資料表 2021-11-18萌芽站長
• 使用 Docker 安裝及運行 Node-RED 教學 2021-12-08萌芽站長
• Node-RED：啟用使用者身分驗證、建立帳號密碼以保護資訊安全 2021-11-18萌芽站長
• Node.js：Gulp 套件協助將 JavaScript 合併、壓縮與命名，將 JS 封裝吧！ 2019-04-02萌芽站長
• 使用 Docker 更新 Node-RED 教學 2021-12-08萌芽站長
• Windows 環境安裝 Node.js 以及 npm & Yarn 兩款熱門 JavaScript 套件管理程式 2019-03-24萌芽站長
• Node.js：Gulp 運行 gulp-clean-css，批次壓縮 CSS 2019-03-28萌芽站長
• Node-RED：將資料寫入至 MSSQL 資料庫中的資料表 2021-12-07萌芽站長
• Node-RED：透過流程圖視覺化串接資料、強大的 IoT 開發工具 2021-10-10萌芽站長
• Node.js：建構路徑物件、自動監看執行、批次檔小技巧（Gulp、mozjpeg 批次圖片壓縮 - 延伸篇） 2019-03-31萌芽站長
• Node.js：Yarn 專案初始化、gulp.js 任務管理工具安裝與使用 2019-03-24萌芽站長
• Node.js：Gulp 運行 gulp-connect 套件，建立前端開發伺服器（Gulp 大展身手！） 2019-03-25萌芽站長
• Node-RED：製造亂數顯示到儀表板的小練習 2021-10-12萌芽站長
• Node.js：jpg、jpeg、JPG、JPEG 通通不遺漏的進行壓縮（Gulp、mozjpeg 批次圖片壓縮 - 延伸篇） 2019-09-30萌芽站長
• Node.js：Webpack 基礎概念與 JS 封裝過程教學（使用 VS Code） 2019-08-19萌芽站長
• Node-RED：Dashboard 使用 button 和 ui control 切換 tab 2021-12-28萌芽站長
• nvm-windows：Windows 平台的 Node.js 版本管理工具，可安裝、切換和管理多個 Node.js 版本 2024-06-26萌芽站長
• Node.js：Gulp 運行 imagemin-mozjpeg，mozjpeg 批次圖片壓縮 2019-03-26萌芽站長
• Node-RED：開啟專案(項目)功能與建立首個新專案 2021-12-02萌芽站長
• Node.js：Gulp 運行 Autoprefixer，批次處理 CSS 供應商前綴問題 2019-03-27萌芽站長

CSS:新版捲(卷)軸!快來看唷!
📆 2013-01-01
📁 網站技術, CSS

Picasa:整理、編輯、分享相片的好幫手
📆 2014-02-26
📁 軟體介紹, 多媒體, 靜圖處理

CSS Scrollbars 自定義捲軸樣式（僅支援 Firefox）
📆 2021-12-16
📁 網站技術, CSS

CSS:list-style-type屬性
📆 2014-01-29
📁 網站技術, CSS

Node-RED：Dashboard 使用 button 和 ui control 切換 tab
📆 2021-12-28
📁 網站技術, Node.js, Node-RED

你的名字。新海誠畫風濾鏡，上傳照片後直接轉換！
📆 2016-11-23
📁 多媒體, 網路應用, 靜圖處理

Classic Widgets（WordPress 外掛）：停用升級 5.8 後的小工具區塊編輯器
📆 2021-07-29
📁 網站技術, 架站程式, WordPress

HTML:跑馬燈<marquee>
📆 2013-01-01
📁 網站技術, HTML

《上一篇》FTP 技術問題探討：目錄只能顯示一萬個檔案或子目錄 《下一篇》將 MS Access 的資料庫匯入至 MySQL 資料庫中