WordPressテーマ開発でもサクッと環境構築したいよね

VueやReactって、全部入りの開発環境がCLIで簡単に構築できて、出だしが快適ですよね。
WordPressにも、そういうの欲しくないですか。
WP CLI？ちがうんです。
SCSSやESのコンパイル/トランスパイル、変更保存時のブラウザ自動更新といった、Node.jsを利用した開発環境を構築したいんです！

そんなあなたに"Sage"

そんな想いから色々さがして見つかったのが、こちら。

Sage

Sageは、WordPressテーマのスターターテンプレートです。
つまり、WordPressテーマの開発に必要なあれこれを束ねた雛形です。
特徴は大きく分けて以下の3つ。

2018/12/10時点で、WordPressボイラープレートでは、おそらくGitHubスター数No.1（9700超）
Webpackを利用したモダンなフロントエンド開発環境
テンプレートをBladeで記述できる

そして、2つ目の特徴には以下の機能が含まれています。

CSS
- SCSSのコンパイル
- 接頭辞自動付与（Autoprefixer）
- 最小化
- 文法チェック
JavaScript
- ECMAScript>=2015のトランスパイル
- 依存関係解決（Module Bundling）
- 最小化
- 文法チェック
ETC
- ブラウザの自動リロード
- 画像サイズ削減

これぞまさに欲しかったもの！やったぜ！

でも少しだけ気になる点が...

基本的に問題なく動作しますが、細かい部分で気になる部分がありました。

`yarn start` / `npm start`時に発生するmain.cssの404エラー

GitHub Issue
WebpackのCSSファイル出力機能は、本番ファイル生成時のみONとなるため、開発サーバーではCSSの404エラーが発生します。

`yarn start` / `npm start`時にJavaScriptの変更保存で発生するHMRの警告

GitHub Issue
Hot Module Replacement(HMR)を受け入れるための設定がJavaScript内に存在しないため、変更保存のたびに警告とリロードが発生します。

`yarn start` / `npm start`時にSSL接続で発生するブラウザからの警告

Discourse
HTTPSで開発サーバーに接続すると、SSL証明書が確認できないことによるエラーが発生します。

初期状態でのjQuery依存

GitHub Issue
初期状態でjQueryへの依存しています。

git管理対象ファイルへの環境変数記載

GitHub
開発ドメイン、テーマディレクトリへのパスなど、環境に依存する情報がgitで管理されてしまいます。

調整するやつ、作りました！

以上の問題を調整するシェルスクリプト、作りました！

Sage optimizer

Sageインストール時の質問に続いて、いくつか追加の質問が求められる形となっています。
Sageの依存関係を満たす環境であれば、同じく利用できるはずです。
くわしい使用方法はREADMEをご参照ください。

まとめ

GitHubを見た感じ、どうやら次期バージョン以降で、フロントエンド部分にLaravel Mixを採用する計画があるようです。
上記の調整をプルリクエストしようかとも思いましたが、Laravel Mixに置き換えられることで、問題が一気に解決する可能性も考えられます。
なので、次期バージョンが出るまでは、このスクリプトを使いつつ様子見かなーと思ってます。
比較的モダンな環境を用意していて、かつメンテナンスが継続しているボイラープレートが他に見当たらないので、しばらくはこのSageでテーマ開発していくことになりそう。
よろしくな！Sage！

（他にも良いボイラープレートあったら教えてください）

目次