タスクランナーをpackage.jsonのみで

Why npm Scripts? | CSS-Tricksより。
GruntやGulp、webpackなどなどを使わずにpackage.jsonでやっちゃえばいいじゃない？的な内容。

ずっとgulpを使ってテーマ構築してたんだけど、どうしても慣れなくて、先のエントリー読んで腹落ちした 😀

package.jsonでやってる内容

• SCSSをCSSにコンパイル（node-sass）
• AutoprefixをPostCSSで
• JavaScriptをeslintでチェック
• uglify-jsでJavaScriptで一纏め & minify
• Imageminで画像を圧縮
• svg-sprite-generatorでSVGを一纏め
• BrowserSyncでリロード
• まとめてwatch

って感じ。eslintと、uglify-jsはまだ調整しないとなぁと思うけど、軽快に動いてる。

BrowserSyncのプロキシモードってのを知ったので、VCCWで作ってる個別のサイトでも全く問題なし ✨️

Imageminはimageディレクトリ内に階層ある場合、ちゃんと拾ってくれるけど、階層通りに書き出してくれないので、ここはどうするか考えどころ…😅
別に気にならないんだけどね 😜

• Add recursive option to imagemin bin · Issue #78 · imagemin/imagemin
• CLI glob problem for recursively targeting files · Issue #87 · imagemin/imagemin

Dynamic sites

If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. Browsersync will wrap your vhost with a proxy URL to view your site.

browser-sync start --proxy "myproject.dev" --files "css/*.css"

Browsersync – Time-saving synchronised browser testing

wp-cli使ってサクッと準備したい

wp scaffold _s slug —theme_name=title —author=full-name —sassify

wp scaffold _s | WP-CLIより

_sベースのテーマひな形作った後、このpackage.json読み込んで npm install したら即構築開始!! ってところまでできるようになりたい 😀

BrowserSyncのプロキシモードのurlをVCCWで作ってる個別のurlに置き換える方法がまださっぱりわからない 😅

しばらくはこれ使って行こうと思う。