こんにちは、mimiです。

WordPressのスリム化計画その2、CSSとJSファイルの管理の続きです。（その１はこちらから）

もうすっかりSASSとjshintが無いと生きていけない体になってしまったので、Wordpressでも使えるようにしてみました。（SASSもStylusに移行するべきかなあ・・・とも思い始めています。）
browserifyしたりminifyしたりしてファイルサイズを減らすスリム化です。

gulpを使った方法は結構出回っていると思うし、npm-scriptsを使ったやり方を書いてみます。

npm-scriptsってなあに？という話は

Grunt/Gulpで憔悴したおっさんの話 – MOL
とか
npm-scripts で Web フロントエンド開発を管理する – アカベコマイリ
なんかをご参照ください。

もちろん既に、

NPM Run WordPress – The Codestead

とか、npm-scriptsでWordpressを扱っているものはあるのですが、私的には単純にSASSファイルとJSファイルの監視と構文チェック、結合、minifyが出来れば良いので自作してみました。

ディレクトリの構成はこんな感じ（themes以下にmyTemplateというテーマを作成する場合）

myTemplate/
    ├ dev/
        ├ package.json
        ├ js/
        └ scss/
    ├ js/
        ├ main.js
        └ main.min.js
    ├ style.css
    ├ style.min.css
    └ （その他お馴染みのwordpress関連ファイル）

で、package.jsonはこんな感じ。

2018/09/12 追記：eslintに変えたので、設定ファイルもメモしておきます。

で、

npm run watch

か

npm run build

して、出来上がったら

npm run release

して、先述のSCRIPT_DEBUGをfalseに設定する、という感じ。

一応、reloadとか作ってみているけれど、あんまり使わないのでbrowser-sync要らないかも。（ローカルテストは普通にVirtual host使っています。）

継ぎ足して書いているので、本当はもっとスムーズなやり方があるんですが、まだ整理出来てなくて、取り敢えずこれで使ってみています。

改良したらまた記事にします。

---

2018/04/11追記：

minify:cssを間違えていたのとソースマップを切ってなかったので、修正しました。