こんにちは、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使っています。）
まだ各モジュールで出来ることなどをちゃんと把握出来てなくて、微妙な気がしますが、取り敢えずこれで使ってみています。
改良したらまた記事にします。