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

こんにちは、yumiです。

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が出来れば良いので自作してみました。

ディレクトリの構成はこんな感じ

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

で、package.jsonはこんな感じ

{
  "name": "myTemplate",
  "version": "0.1.0",
  "description": "sass compile, minmum etc.",
  "scripts": {
    "compile:sass": "node-sass --include-path scss scss/style.scss ../style.css",
    "minify:css": "node-sass --include-path scss scss/style.scss ../style.min.css --output-style compressed",
    "watch:css": "node-sass --include-path scss scss/style.scss ../style.css -w",
    "check:js": "jshint js/*.js",
    "watch:js": "watchify js/*.js -o ../js/main.js -v",
    "build:js": "npm run check:js && browserify js/*.js -o ../js/main.js",
    "minify:js": "uglifyjs ../js/main.js -m -c -o ../js/main.min.js",
    "release:js": "npm run check:js && npm run build:js && npm run minify:js",
    "build": "npm run compile:sass && npm run build:js",
    "watch": "npm run watch:css && npm run watch:js",
    "release": "npm run minify:css && npm run release:js",
    "reload": "browser-sync start --proxy 'local.test' --files '../**/*'"
  },
  "dependencies": {
    "browser-sync": "^2.18.8",
    "browserify": "^14.3.0",
    "jslint": "^0.10.3",
    "node-sass": "^4.5.2",
    "uglify-js": "^2.8.22",
    "watchify": "^3.9.0"
  }
}

で、

npm run watch

npm run build

して、出来上がったら

npm run release

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

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

まだ各モジュールで出来ることなどをちゃんと把握出来てなくて、微妙な気がしますが、取り敢えずこれで使ってみています。

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