【WordPressのスリム化計画その2】CSSとJSファイルの管理にnpm-scriptsを使おう

こんにちは、mimiです。

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

もうすっかり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を間違えていたのとソースマップを切ってなかったので、修正しました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください