npm scriptsでscriptsを複数実行すると動作しない

Question

ワードプレスのカスタムブロックを作りたくてwp-scriptというパッケージをインストールしました。
javascriptとsassファイルをコンパイルしたく、package.jsonに下記の様に記述しています。
また"message:js"と"message:css"を同時に実行したく、"npm-run-allも導入しています。

"scripts": {
	"message:js": "wp-scripts start blocks/message/src/index.js --output-path=blocks/message/build/",
	"message:css": "node-sass --include-path scss blocks/message/src/index.scss blocks/message/build/index.css -w --output-style compressed",
	"message": "npm-run-all message:*"
}

"message:js"と"message:css"それぞれ別に実行すると動作します。
ただ"message"を実行すると、"message:js"だけが動作し、さらにもともと存在していたindex.cssもbuildフォルダから消えてしまいます。
どのように解決したら良いのでしょうか？

Answer 1

前提

それぞれのnpm scriptsの内容を踏まえて、それぞれの目的が

• message:js: 開発時にsrc配下のjsファイルが編集されるたびにコンパイルする
• message:css: 開発時にsrc配下のscssファイルが編集されるたびにコンパイルする
• message: 上記2個のnpm-scriptsを同時に動かして、開発時にjs/scssのどちらかが編集されるたびに適切にコンパイルする

という想定で回答します。

対応方法例（作業的にわかりやすいもの）

次の2個を実施する必要があります。

• 1回だけ: package.json内のmessageの定義に-pオプションをつける
• 都度: npm run message実行後に、scssファイルを何もせずに保存だけする

-    "message": "npm-run-all message:*"
+    "message": "npm-run-all -p message:*"

解説

※手元の挙動確認を前提にした原因説明です

wp-scripts startの挙動について

message:jsで呼び出しているこのコマンドは、

• --output-pathで指定した出力先フォルダをまっ更にして
• 指定したファイルをコンパイルしして
• 指定したファイルに変更が無いかを監視し続ける

いうものです。
つまり、1回限りのコンパイルコマンドではないため、利用者側が止めない限りは終了しません。

node-sass

こちらは通常だと1回だけSCSSファイルをCSSにコンパイルするものです。
ただし、-wオプションが指定されているため、こちらも指定したファイルに変化がないかを監視し続けます。

npm-run-allの挙動について

npm-run-allはパラメータなしに呼び出すと、順番に並んでいるコマンドを順番に実行します。

前述の通りmessage:jsで定義しているコマンドはファイルを監視し続けるタイプのもののため、Ctrl-Cなどで自分の手で止める必要が出てきます。
しかしこの状況下でCtrl-Cでプロセスを止めても、npm-run-allへのプロセス終了シグナルにしかならないようです。
そのため、「message:jsが終了→続けてmessage:cssを実行」という流れにはなりません。

message:jsの中身がbuildフォルダをまっさらにしてしまう関係上、仮に順番をきちんと定義してもcssが生成されることはありません。（最初の回答が正しくない理由がここです）

そこで、どちらのプロセスも同時に動いて、それぞれの監視をしてもらう必要があります。
こういった用途などのためにnpm-run-allには-pという並列実行を行うパラメータがあります。

npm-run-all -p での挙動概要と、毎回CSSの保存が必要な理由

message:*のそれぞれで定義したコマンドはいずれも「コンパイルして監視する」ものです。
これらを-pで同時に実行することで、それぞれの変更を検知してコンパイルが動くようになります。

ただし、並列実行のためにどちらが先に最初のコンパイルをするかが不明であり、message:jsが最初にbuildフォルダをまっさらにしてしまうため、何かしらの形式でscss側に変更を検知させてコンパイルし直させる必要があります。

※これは直接的な編集である必要はなく、ファイルをエディタで開いて何もせずCtrl-Sで保存すれば問題ないはずです

余談

回答例として上記のことを書いてはみたものの、「message実行のたびにscssと何もしなくていいから保存だけする」のはあまり効率出来ではないです。
（「作業的にわかりやすいもの」と注釈をつけたのはこれが理由です）

もし余裕があるのであれば、wp-scriptsが参照可能なwebpack.config.jsに変更を加えて、scssのビルドもwp-scriptsに任せるようにすることを推奨したいです。

※wp-scripts内でsassコンパイルまでしようとしていそうなサイト例

Comments

[acbma]

ご回答ありがとうございます。
ご提案通りに明示的に書き直し、"message:css"の実行も"message:js"の後に記述しているのですが、
同じ結果（= message:js のみが実行される。buildフォルダの中身はまっさらになってしまう）でした。

[acbma]

CSSファイルが消えないようにするには、JSファイルを生成する度に、Sassファイルも保存しなおさないといけないということですね。
webpack.config.jsの方の設定でがんばってみようと思います。
丁寧に解説くださりありがとうございました。