はじめに
understrapを用いて、WordPressの自作テーマを作っているところです。M1 Macbook Airを使用しているのですが、これまでどうしてもgulpでのSassの自動コンパイルがうまくいきませんでした。ここでは私の環境でうまくいった手順を示しますので、同じような事象で困っている方の助けになればと思います。ついでに自身の備忘録としても残したいと思います。もっといい方法あるよ！という方がいらっしゃいましたらご教示いただけると幸いです。
環境
M1 Macbook Air
CPU:8コア
GPU:7コア
RAM:8GB
SSD:256GB
ターミナルはARM64(M1ネイティブ)
% 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の自動コンパイルが行われます。