目次
WordPressテーマ開発でもサクッと環境構築したいよね
VueやReactって、全部入りの開発環境がCLIで簡単に構築できて、出だしが快適ですよね。
WordPressにも、そういうの欲しくないですか。
WP CLI？ちがうんです。
SCSSやESのコンパイル/トランスパイル、変更保存時のブラウザ自動更新といった、Node.jsを利用した開発環境を構築したいんです！
そんなあなたに"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インストール時の質問に続いて、いくつか追加の質問が求められる形となっています。
Sageの依存関係を満たす環境であれば、同じく利用できるはずです。
くわしい使用方法はREADMEをご参照ください。
まとめ
GitHubを見た感じ、どうやら次期バージョン以降で、フロントエンド部分にLaravel Mixを採用する計画があるようです。
上記の調整をプルリクエストしようかとも思いましたが、Laravel Mixに置き換えられることで、問題が一気に解決する可能性も考えられます。
なので、次期バージョンが出るまでは、このスクリプトを使いつつ様子見かなーと思ってます。
比較的モダンな環境を用意していて、かつメンテナンスが継続しているボイラープレートが他に見当たらないので、しばらくはこのSageでテーマ開発していくことになりそう。
よろしくな！Sage！
（他にも良いボイラープレートあったら教えてください）