VS Code 自動壓縮

在前端開發中，為了保持網頁載入速度，壓縮 js 與 css 是必經之路。雖然有很多打包工具（如 Webpack, Vite），但有時在處理老舊專案或簡單的小程式時，只需要：「按下 Ctrl+S，它能自動更新對應的 .min 檔」。

原本一直都是使用 JS & CSS Minifier (Minify)，但其實它已經很久很久沒有更新了，當遇到較新的語法(ES2020+)就會出錯，於是叫 AI 幫我弄一個自動化流程。

準備工作

在開始之前，先安裝以下工具：

VS Code 插件：搜尋並安裝 Run On Save。
esbuild：強大的全能壓縮工具。全域安裝：npm install -g esbuild

核心設定

因為不希望每次存檔都亂生檔案，而是要「只有當 .min 檔存在時才更新」。同時，專案結構可能很混亂，有時 .min 在同層，有時在上一層的 /js 資料夾裡。

調整 VS Code settings.json：

"emeraldwalk.runonsave": {
    "autoClearConsole": false,
    "showOutputOn": "error", // 關鍵：發生錯誤時自動彈出輸出視窗
    "autoFocus": true,
    "commands": [
        {
            "match": "\\.js$",
            "notMatch": "\\.min\\.js$",
            "cmd": "powershell -Command \"$src='${file}'; $name='${fileBasenameNoExtension}'; $min1=$src -replace '\\.js$','.min.js'; $parentDir=(Split-Path (Split-Path $src -Parent) -Parent); $min2=Join-Path $parentDir 'js\\$name.min.js'; $targets=@($min1, $min2); $found=$null; foreach($t in $targets){ if(Test-Path $t){ $found=$t; break } }; if($found){ Write-Host 'Target found: ' $found; try { esbuild $src --minify --outfile=$found --target=es2020 --log-level=error --color=true; if ($LASTEXITCODE -ne 0) { throw 'esbuild failed' } Write-Host 'SUCCESS: Minified!' } catch { Write-Error '--- COMPRESSION FAILED ---'; Write-Error $_; exit 1 } } else { Write-Host 'SKIP: No target .min.js found.' }\""
        },
        {
            "match": "\\.css$",
            "notMatch": "\\.min\\.css$",
            "cmd": "powershell -Command \"$src='${file}'; $name='${fileBasenameNoExtension}'; $min1=$src -replace '\\.css$','.min.css'; $parentDir=(Split-Path (Split-Path $src -Parent) -Parent); $min2=Join-Path $parentDir 'css\\$name.min.css'; $targets=@($min1, $min2); $found=$null; foreach($t in $targets){ if(Test-Path $t){ $found=$t; break } }; if($found){ Write-Host 'Target found: ' $found; try { esbuild $src --minify --outfile=$found --log-level=error --color=true; if ($LASTEXITCODE -ne 0) { throw 'esbuild failed' } Write-Host 'SUCCESS: Minified!' } catch { Write-Error '--- COMPRESSION FAILED ---'; Write-Error $_; exit 1 } } else { Write-Host 'SKIP: No target .min.css found.' }\""
        }
    ]
}

多目錄智能搜尋

腳本會自動檢查兩個地方：

當前目錄：script.js 旁邊的 script.min.js。
上層目錄的資料夾：如果你的結構是 /js/script.min.js 與 /src/script.js，它也能找得到。這避免了在不同專案結構下需要反覆修改設定的困擾。

強制錯誤彈出 (Error Catching)

如果壓縮失敗了，加入了 try { ... } catch { ... } 邏輯與 exit 1 狀態碼。配合 "showOutputOn": "error"，只要 JS 代碼寫錯（例如少一個括號）導致 esbuild 無法解析，VS Code 就會強行彈出底部視窗，並用亮紅色標示錯誤細節。

安全防護

使用 notMatch 排除 .min.js 本身，防止程式進入「壓縮再壓縮」的無限死迴圈。

可能遇到的問題

BadReplaceArgument (PowerShell 錯誤)：如果在 PowerShell 裡直接寫複雜的運算（如 -replace）在陣列裡，容易導致參數解析失敗。解決方法：先將路徑存成變數（如 $min1, $min2），再進行判斷。
輸出視窗沒跳出來：必須在 runonsave 設定層級加入 "showOutputOn": "error"，並確保腳本在失敗時回傳 exit 1，插件才會知道「現在出事了，該跳出視窗」。
路徑解析錯誤：在 Windows 下使用 ../ 有時會失效，使用 Split-Path 與 Join-Path 組合出的路徑會比純字串拼接更穩定。