はじめに

understrapを用いて、WordPressの自作テーマを作っているところです。M1 Macbook Airを使用しているのですが、これまでどうしてもgulpでのSassの自動コンパイルがうまくいきませんでした。ここでは私の環境でうまくいった手順を示しますので、同じような事象で困っている方の助けになればと思います。ついでに自身の備忘録としても残したいと思います。もっといい方法あるよ！という方がいらっしゃいましたらご教示いただけると幸いです。

環境

M1 Macbook Air
CPU:8コア
GPU:7コア
RAM:8GB
SSD:256GB
ターミナルはARM64(M1ネイティブ)

uname

% uname -m
arm64

WordPressのローカル環境構築にはLocal By FlyWheelを使用
understrapをテーマとして導入し、子テーマを編集する前提で進めます

導入手順

公式ページからNode.jsの最新版(ARM64)をインストール(執筆時点でのバージョンはv16.6.2)
npm(v7.20.3)は一緒にインストールされます
understrapの子テーマ内に最初からあるpackage.jsonをいったん消す
（万が一復旧させたい場合に備えてバックアップ推奨）
npm init -y を実行して新しくpackage.jsonを生成する
gulpをグローバルインストールする

gulpをローカルにインストールする

gulpのLocal Versionが4であることを確認する

CLI Version:2.3.0
Local Version:4.0.2

npm audit fixを実行するとgulpのバージョンが3.9にダウングレードされるので実行しない

sass, gulp-sassをインストールする

他の関連パッケージもインストールする
(gulpfile.js内でrequire()に書かれているパッケージです)

imageminだけバージョン指定してインストールする
(最新版は8.0.0だがエラーを吐くため)

gulpfile.js内の

を以下のように書き換える

元の行はコメントアウトして残しておくことをお勧めします

最後に

を実行してセットアップは完了です。

使い方

これでSassの自動コンパイルが行われます。