WordPress + SASS を GitHub Actions で自動デプロイ

.github/workflows/deploy.yml

on:
  push:
    branches:
      - main
name: Deploy the theme
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up node
        uses: actions/setup-node@v2
        with:
          node-version: 20
      - name: Install Sass
        run: |
          npm install -g sass
      - name: Chmod bundle_theme.sh
        run: |
          chmod +x ./bundle_theme.sh
      - name: Bundle theme
        run: |
          ./bundle_theme.sh
      - name: Upload
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./theme/
          server-dir: ${{ secrets.FTP_DIR }}
          dangerous-clean-slate: true

bundle_theme.sh の中身

#!/bin/sh
sass ./main-theme/:./main-theme/
cp -r ./main-theme/ ./theme/
find ./theme -type f -name "*.scss" -delete
find ./theme -type f -name "*.css.map" -delete

要点

deploy.yml

npm install -g sass

SCSSをコンパイルするActionsがあったが、ファイルを全て指定しないといけなかった。
ローカル開発時は
sass --watch ./main-theme/:./main-theme/
で開発している

SamKirkland/FTP-Deploy-Action@v4.3.5

dangerous-clean-slate: true で一度ディレクトリをクリアしている。
これはファイル数が多ければ処理が多くなるので適宜。

bundle_theme.sh

cp -r ./main-theme/ ./theme/

.scss .css.map ファイルを納品ファイルに含めないためにディレクトリをコピーしている。

find ./theme -type f -name XXX -delete

rm -rf ./theme/**/* では動かなかった。globstar
shopt -s globstar の追記は却下した。ステップが増えるため。