タスクランナーを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ディレクトリ内に階層ある場合、ちゃんと拾ってくれるけど、階層通りに書き出してくれないので、ここはどうするか考えどころ…😅
別に気にならないんだけどね 😜

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に置き換える方法がまださっぱりわからない 😅

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

コメントを残す

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

CAPTCHA