Bootstrap を使った WordPress のテーマ制作で、デファクトな開発フローはあるのだろうか。とりあえず Bootstrap 全部入りの CSS と JS を WP のテンプレートで読み込んで、ある程度形になった時点で Bootstrap の必要なコンポーネントをビルド、テンプレートの CSS と JS を差し替えて確認という流れで始めたが、ちょっとめんどくさいのでいくつかの自動化コードを書いた。
大まかな流れは変わらないが、WPのテーマではCSSは触らずテンプレートの編集のみに、BSはVite環境で編集してCSSとJSのバンドルを作成。WPのサーバ(Apache)とBSのサーバ(Node)間のファイルのやりとりを自動化する。
SCSS編集のためのHTMLファイルの取得はVite環境立ち上げ時にGETで取得し、HMR (Hot Module Replacement)のためにタグを差し込む。この流れはPythonでおこない、npm start
スクリプト("start": "python actions/_get_html.py; vite"
)に追加。
HMRのタグを挿入するためのマーカー(<!-- tinyc-scripts -->
)はWPテーマのfunctions.phpで、style_loader_tag
とscript_loader_tag
のフックにフィルターを追加。
スタイル編集後のバンドルファイルは、Vite Plugin APIのcloseBundle
にフックするコードをvite.config.jsに追加。Viteのdev環境では編集してもバンドルファイルが作成されるわけではないので、kill -TERM
した時だけcloseBundle
時にnpm run build
して生成されたファイルをコピーするようにした。
あと、Vite環境上でもHTMLの編集が発生するかもしれないので、上記のフック内からDiff作成のためのコードも呼んでいる。
Vite(Rollup.js)はこのプロジェクトで初めて使ったのでまだ全貌を把握できていないけど既に気に入っている。