npm-run-allでnpm scriptsを整理してみた

Angularのマルチプロジェクトを構築していると、スクリプトがカオスになってきます。
npm-run-allを使って整理したときのナレッジを書き溜めておこうと思います。

修正前

プロジェクトが増えるたびに開発ビルド／本番ビルド／ウォッチのスクリプト追加、一括ビルド（開発用／本番用）スクリプトの修正が必要になってしまい、メンテナンスがかなりめんどくさいです。

package.json

"scripts": {
  "build:dev": "npm run build-app:app1 && npm run build-app:app2 && npm run build-app:app3",
  "build:prod": "npm run build:prod:app1 && npm run build:prod:app2 && npm run build:prod:app3",
  "build-app:app1": "ng build app1",
  "build-app:app2": "ng build app2",
  "build-app:app3": "ng build app3",
  "watch:app1": "ng build app1 --watch",
  "watch:app2": "ng build app2 --watch",
  "watch:app3": "ng build app3 --watch",
  "build:prod:app1": "ng build app1 --prod",
  "build:prod:app2": "ng build app2 --prod",
  "build:prod:app3": "ng build app3 --prod",
  ・・・
}

npm-run-allを使う

npm-run-allを使うことで、かなりシンプルに出来ます。

npm-run-allはワイルドカードを使って一括でスクリプトを実行したり、-pオプションでスクリプトを並列実行することができます。

早速、上記のpackage.jsonをnpm-run-allを使って改修していきます

引数でまとめる

"scripts": {
  "build:dev": "run-s build-app:*",
  "build:prod": "run-s \"build-app:* -- --prod\"",
  "build-app:app1": "ng build app1",
  "build-app:app2": "ng build app2",
  "build-app:app3": "ng build app3",
  "watch": "run-s \"build-app:{1} --watch\" --",
  ・・・
}

こうなりました。
プロジェクトが増えてもbuild-app:XXXを追加するだけで、良くなります。

解説

基本的には公式リファレンスに従って、シンプルに使ってます。

ちなみに、今回は直列実行するのでnpm-run-all -sの短縮形であるrun-sで実行します。
（並列実行したい場合はnpm-run-all -pもしくはrun-pを使用してください。）

ワイルドカード

シンプルなワイルドカードです。
build-app:*とすることでbuild-app:がつくスクリプトがすべて実行されます。

  "build:dev": "run-s build-app:*",

ダブルコーテーションで囲うことでオプションを指定することもできます。
build-app:*で実行される各スクリプトに対して--prodオプションを指定します。

  "build:prod": "run-s \"build-app:* -- --prod\"",

引数

引数を使って動的に実行スクリプトを切り替えます。
{1}、{2}、・・・で引数を扱うことができます。
末尾に--を置くのがポイントですね。

"watch": "run-s \"build-app:{1} --watch\" --",

npm run watch app1を実行することで、run-s \"build-app:{1} --watch\" -- app1が実行され、最終的にbuild-app:app1スクリプトが実行されます。