Photosynthesic blog

夫婦でやってるWeb屋です。

2018-04-06

【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というテーマを作成する場合)

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

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

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter