如何为Git CI工作流添加JS/CSS变更触发构建的条件

以下是修改后的完整工作流文件，实现了仅检测到JS/CSS文件变更时才执行依赖安装和资源构建的逻辑：

name: Workflow
on:
  push:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          repository: ${{ github.repository }}
          token: ${{ secrets.GITHUB_TOKEN }}
          fetch-depth: 0  # 拉取完整提交历史，确保diff对比正常

      - name: Synchronize the repository
        run: |
          git checkout master
          git pull origin master  # 简化同步操作，替代原diff+merge步骤

      - name: Detect JS/CSS file changes
        id: detect_changes
        run: |
          # 获取本地与远程master的文件差异，筛选JS/CSS文件
          CHANGED_ASSETS=$(git diff --name-only HEAD origin/master | grep -E '\.(js|css)$')
          # 设置输出变量，标记是否有资源文件变更
          echo "has_asset_changes=$( [ -n "$CHANGED_ASSETS" ] && echo 'true' || echo 'false' )" >> $GITHUB_OUTPUT

      - name: Install dependencies
        if: steps.detect_changes.outputs.has_asset_changes == 'true'
        run: npm ci

      - name: Build assets
        if: steps.detect_changes.outputs.has_asset_changes == 'true'
        run: npm run prod

关键修改说明 #

• 完整历史拉取：在Checkout步骤添加fetch-depth: 0，确保能获取仓库完整的提交历史，避免因历史缺失导致diff对比失败。
• 变更检测逻辑：通过git diff对比本地与远程master的文件差异，用grep筛选出.js和.css类型的文件；根据筛选结果设置输出变量has_asset_changes，标记是否存在资源文件变更。
• 条件执行步骤：给Install dependencies和Build assets步骤添加if条件判断，仅当检测到JS/CSS文件变更时才执行这些步骤。

如果需要根据分支环境切换构建命令（比如master用prod，开发分支用dev），可以修改Build assets步骤的脚本：

- name: Build assets
  if: steps.detect_changes.outputs.has_asset_changes == 'true'
  run: |
    if [ "${{ github.ref }}" == "refs/heads/master" ]; then
      npm run prod
    else
      npm run dev
    fi

内容的提问来源于stack exchange，提问作者Aaron