npm scriptsで、ソースのコンパイル後にローカルサーバを立ち上げつつソースのWatchもする方法

これまでGulpでタスク管理していたのを、npm scriptsでの管理に移行しようとしています。

そこで、以下の内容でタスク実行したいです。
①HTML, JS, CSSなどをコンパイル（直列処理）
②BrowserSyncでローカルサーバを立ち上げ、HTML, JS, CSS等をWatch(並列処理)

こちらが詳細です。

json
1  "scripts": {
2    "local": "NODE_ENV=local npm-run-all -s local:build:** && npm-run-all -p local:watch:**",
3    "local:build:clean": "rimraf ./local/**",
4    "local:build:copy": "cpx src/img/** local/img/",
5    "local:build:js": "webpack",
6    "local:build:pug": "pug src/pug/build/*.pug --out local --basedir src/pug/ --pretty",
7    "local:build:scss": "node-sass src/scss/build.scss local/styles/style.css",
8
9    "local:watch:pug": "watch 'npm run local:build:pug' src/pug/",
10    "local:watch:scss": "watch 'npm run local:build:scss' src/scss/",
11    "local:watch:js": "watch 'npm run local:build:js' src/js/",
12    "local:watch:copy": "watch 'npm run local:build:copy' src/img/",
13    "local:watch:server": "browser-sync start --server './local/' --config bs-config.js"
14  },

この順番で実行したい理由は、全てを並行処理するとコンパイル完了前にローカルサーバが立ち上がってしまい、
エラーになるためです。

しかし現状、watchではコンパイルが自動で起こるため、①と②でそれぞれコンパイルが行われ、
無駄な処理になってしまっています。

これを解決するために、初回コンパイルを伴わないWatchができないものかと考えています。
何か方法がありましたら、ご教授願います。

行動規範の内容に同意します

回答2件

初回コンパイルを伴わないWatchができないものかと考えています。

local:watch系全てに入っているこれが癌'npm run local:build:pug'
自分で伴わないようにしたいって言ってるんだから不要に決まってるよね。
そもそもwatchは見張るだけなんだから一式全部コンパイルする必要ない。

未確認だから確認して欲しいんだけど、
local:watchコマンドを新設するとlocal:watch:**で実行されちゃう？

もし実行されないならlocal:watchに全build系を突っ込んで、
予めコンパイルを伴いたい時だけnpm run local:watchコマンドを直接叩くみたいな事をすればいい。
実行されるなら残念だけどlocal:watch-and-buildみたいなちょっと長い名前で管理すればいい。

投稿2019/02/08 09:32

miyabi-sun

総合スコア21158

yu-smc

2019/02/10 05:30

ご回答ありがとうございます。すみません、質問文がわかりづらかったですね。そもそもwatchは見張るだけなんだから一式全部コンパイルする必要ない →まさに見張るだけのコマンドが作成したかったのです。 watchパッケージではなくnpm-watchパッケージを使ったらそれらしいことができました！ありがとうございました。

行動規範の内容に同意します