【2019年6月】Node.js/npm-scriptsでWordPressのテーマ開発環境を構築。（ライブリロードあり）

WordPressのテーマ作成用のGulp開発環境をしばらく放置してしまい、gulpと各種プラグイン、Node.js本体をバージョンアップしたところエラーが多発してビルドできない状況になってしまいました。

これを機に、以前からやってみたかったnpm-scriptsによるビルド環境に移行することにしました。本記事は、その時実施した内容の備忘録です。

実装した機能

  • PHPファイル、画像ファイル、npm管理外のプラグイン/ライブラリファイル等をsrcからdistにコピー
  • テーマファイルを削除
  • sassのコンパイル（ワイルドカードも可）
  • cssにベンダープレフィックス付与
  • JavaScriptをES5に変換してバンドル（rollup.js使用）
  • JS/CSSをフォーマット（prettier使用）
  • ファイルを監視→WPのテーマディリクトリに出力→ライブリロード
ご注意

※本記事はMacで検証しています。package.jsonのconfigの値を参照する記法がwindowsの場合は異なるという情報がありますが、未検証なのでご注意ください。

※WordPressのローカル環境構築は割愛しています。あらかじめdistディリクトリに設置し、起動できる前提としています。筆者はMAMPを使っています。

※ライブリロードは、WordPressを動作させるローカルサーバー（この記事ではMAMP）をbrowser-syncで連携させることにより利用できる前提です。

ディリクトリ構成

theme-dev/
　├ dist/ *WordPressを設置
　├ src/
　　├ package.json
　　├ rollup.config.js *rollup.jsの設定ファイル
　　├ bs-config.js *browser-syncの設定ファイル
　　├ php/ *WordPressのテーマで使うphpファイルはここにまとめて設置。
　　├ public/ *npmで配布されていないライブラリなどはここに設置。
　　├ images/
　　└ assets/
　　　　├ js/
　　　　└ sass/

一式まとめた圧縮ファイルはこちら

package.json作成

$ npm init

パッケージのインストール

ファイルのコピー/削除

$ npm install cpx --save-dev
$ npm install rimraf --save-dev

sassコンパイル/sassワイルドカード

$ npm install node-sass --save-dev
$ npm install node-sass-globbing --save-dev

ベンダープレフィックス追加

$ npm install postcss-cli autoprefixer --save-dev

JS ES5変換/バンドル

$ npm install rollup --save-dev
$ npm install rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-babel --save-dev
$ npm install @babel/core @babel/preset-env --save-dev

コードフォーマッタ

$ npm install prettier --save-dev

スクリプトの直列/並列実行

$ npm install npm-run-all --save-dev

ファイル監視/ライブリロード

$ npm install watch --save-dev
$ npm install browser-sync --save-dev

設定ファイルの作成

ルートディリクトリに下記設定ファイルを設置。

rollup.config.js

import resolve  from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel  from 'rollup-plugin-babel';

export default {
  input: 'src/assets/js/script.js',
  output: {
    format: 'iife',
    dir: 'dist/wp-content/themes/theme-dev' //テーマファイルを出力したいパスを指定
  },
  plugins: [
    resolve({
      jsnext: true
    }),
    commonjs(),
    babel({
      presets: [
        [
          "@babel/preset-env", {
          "modules": false,
          "targets": {
            "browsers": ['last 2 versions']
          }
        }
        ]
      ],
      babelrc: false
    })
  ],
  experimentalCodeSplitting: true
};

bs-config.js

※MAMP等でサーバーを起動したときにWordPressサイトが動作するURLをproxyに記載します。

module.exports = {
    "proxy": "http://localhost:8888/theme-dev/dist/" //MAMP等のローカルサーバーを指定
};

package.jsonにnpm-scriptsを追加

※configとscriptsのみ掲載します。
※distPathはテーマファイルを出力したいパスを指定します。

  "config": {
    "distPath": "/dist/wp-content/themes/theme-dev",
    "sassIndex": "/src/assets/sass/style.scss"
  },
  "scripts": {
    "clean": "rimraf .$npm_package_config_distPath",
    "copy/php": "cpx 'src/php/**/*.php' .$npm_package_config_distPath",
    "copy/public": "cpx 'src/public/**/*' .$npm_package_config_distPath/public",
    "copy/image": "cpx src/images/*/ .$npm_package_config_distPath/images",
    "copy": "npm-run-all -p copy/*",
    "css/sass": "node-sass --importer node_modules/node-sass-globbing/index.js .$npm_package_config_sassIndex -o .$npm_package_config_distPath --output-style expanded --source-map .$npm_package_config_distPath",
    "css": "npm-run-all -s css/*",
    "js/rollup": "rollup -c=rollup.config.js",
    "js": "npm-run-all -s js/*",
    "fmt/js": "prettier --write src/assets/js/*.js",
    "fmt/sass": "prettier --write src/assets/sass/**/*.scss",
    "fmt": "npm-run-all -p fmt/*",
    "build": "npm-run-all -s clean copy/* css js fmt",
    "dev/server": "browser-sync start --config bs-config.js --files=.$npm_package_config_distPath/*.css, .$npm_package_config_distPath/*.js, .$npm_package_config_distPath/**/*.php",
    "dev/css": "watch 'npm run css' src/assets/sass/",
    "dev/js": "watch 'npm run js' src/assets/js/",
    "dev/php": "watch 'npm run copy' src/php/",
    "dev/image": "watch 'npm run copy' src/images/",
    "dev/fmt": "watch 'npm run fmt' src/assets/js/ src/assets/sass/**/",
    "dev": "npm-run-all -p build dev/*",
    "prd/sass": "node-sass --importer node_modules/node-sass-globbing/index.js .$npm_package_config_sassIndex -o .$npm_package_config_distPath --output-style expanded",
    "prd/postcss": "postcss .$npm_package_config_distPath/style.css -o .$npm_package_config_distPath/style.css",
    "prd": "npm-run-all -p prd/*",
    "release": "npm-run-all -s clean copy prd js fmt"
  },


※configのdistPathにはテーマファイルを出力したいパスを指定します。

使用できるコマンド

開発用ビルド

$ npm run build

開発用ライブリロード

$ npm run dev


※このコマンドでエラーが起きる場合はいったんnpm run buildしてみてください。

本番用ビルド

$ npm run release

PHPファイル、画像ファイル、任意のプラグイン/ライブラリファイル等をsrcからdistにコピー

$ npm run copy

テーマファイルを丸ごと削除

$ npm run clean

まとめ

CSS/JSの圧縮は今回見送りました。webpackを使うと良いのかもしれません。

また、lint系のプラグインも入れてません。この辺はエディタ任せでもいいかと思いつつ、気が向いたら試すかなー？という感じです。

Local by Flywheelとの連携も試しました。browser-syncの監視対象をカンマ区切りで複数指定すると、ファイルを編集してないのに勝手にリロードするという現象が発生しましたが、カンマ区切りやめてアスタリスクで全ファイル指定したら大丈夫そうでした。

以下の記事を参考にさせていただきました。（ありがとうございました）

コメントをどうぞ！