今天是第三篇針對GitHub Action進行學習的文章，
在這篇裡，我們將會了解為什麼要分 jobs，
學會讓 workflow 更有效率：
加入 CSS 壓縮
HTML 語法檢查
條件部署（只在特定路徑變更時才觸發）
matrix（多環境測試）

總而言之，就是建立「自動化部署強化版」!!

為什麼要分 job？

在前一篇，我們學到一個 workflow 可以包含多個 jobs。
那麼，為什麼要這樣拆呢？

不分 Job:

• 所有流程都放在同一台 runner 上
• 若中間某步失敗 → 全部流程停掉
• 無法同時執行多任務

分 Job:

• 每個 job 在獨立的環境執行
• 可獨立測試、部署不同階段
• 可平行運行、節省時間

結論：
分 job 是為了讓流程更清楚、可維護，也能同時在不同環境中測試。

延伸練習：最佳化 Actions Workflow

1. paths: 條件部署
代表只有這些檔案有變更時才會觸發。
這樣可以避免「改 README 也重新部署」的浪費。

如範例，表示當「index.html」或 css資料夾有變更，
才會觸發執行下面的指令。

paths:
  - 'index.html'
  - 'css/**'

2. needs: 任務依賴順序
needs 是確保流程依序進行：

1. 檢查 HTML
2. 壓縮 CSS
3. 部署頁面
   讓整個流程有條理、可追蹤。

如範例，這表示如果要部署，需要先執行完 lint job 和 minify job 才行。

  deploy:
    runs-on: ubuntu-latest
    needs: [lint, minify]

3. htmlhint: 自動檢查 HTML 語法
HTMLHint 是一個簡單的語法檢查工具。
你可以自訂規則檔 .htmlhintrc，
例如：標籤必須小寫、屬性要有引號等。
要使用HTMLHint，需要先install才能用喔!

npm install -g htmlhint
htmlhint index.html

這裡就是把 HTMLHint 安裝到電腦上，
讓你可以檢查 HTML 文件是否有語法錯誤或不符合規範的寫法。
接下來，就使用 HTMLHint 去檢查 index.html 是否有語法錯誤、結構問題或不符合最佳實務的寫法。

執行後，HTMLHint 會在終端機列出檢查結果。
結果會顯示類似：

index.html
[L17] [attr-value-double-quotes] Attribute values must be in double quotes.

這可以幫你自動找出 HTML 結構問題。

4. clean-css-cli: 自動壓縮 CSS

npm install -g clean-css-cli
npx clean-css-cli -o css/style.min.css css/style.css

這會自動產生一個 style.min.css（檔案更小、更快載入），
將 css/style.css 壓縮後，生成一個新的檔案 css/style.min.css。
我們也可以把這步加入 Actions，讓每次部署都壓縮最新版本。

5. Matrix 測試
如果你想進一步測試不同環境（例如 Node.js 版本），可以用：

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14, 16, 18]

    steps:
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
      - run: node -v

這樣同一個流程會平行跑三次，
確保專案在不同版本環境下都能正常運作。

我們今天又學習很多workflow的指令語法，
原來 GitHub Actions 不只是幫我部署，也能檢查、壓縮、測試。
這就像有一個小幫手，每次 push 都幫我完成一系列維護工作。
大家如果要最佳化自己建立的workflow，可以參考這篇文章!希望有幫助到。