Foremanみたいに複数のプログラムを並列に起動してくれるnpmパッケージです。 npmなので、npmスクリプト中で使うのに、環境設定の面で有利です。 主にwatchスクリプトで使います。
使用例
例えば、次の例ではngcコマンドとesbuildコマンドを両方watchモードで起動しています。
"watch": "concurrently npm:watch:ngc npm:watch:app", "watch:ngc": "ngc --watch --project tsconfig.app.json", "watch:app": "esbuild --watch out-tsc/app.js --bundle --outdirdist",
Angularアプリケーションをesbuildでバンドルするには、事前にngcコマンドで素のJavaScriptにコンパイルする必要があります。
watchモードでないビルドであれば、次のように書くとngc、esbuildの順で逐次的に実行できます。
"build": "ngc --project tsconfig.app.json && esbuild out-tsc/app.js --bundle --outdirdist",
これを単にwatchモードで起動するために、次のように書きますと、期待通りに動きません。
"build": "ngc --watch --project tsconfig.app.json && esbuild --watch out-tsc/app.js --bundle --outdirdist",
ngcコマンドをwatchモードで起動すると、ファイルの変更を監視するために、常駐します。
つまりコマンドが終了しませんので、いつまで経ってもesbuildコマンドは実行されません。
これを解消するために並列にコマンドを実行する必要があります。 concurrentlyを使い次のように書きます。
"watch": "concurrently 'ngc --watch --project tsconfig.app.json' 'esbuild --watch out-tsc/app.js --bundle --outdirdist'",
便利な使い方
Shortened NPM run commands
npmスクリプトをnpm:スクリプト名の形式で指定できます。
"watch": "concurrently 'ngc --watch --project tsconfig.app.json' 'esbuild --watch out-tsc/app.js --bundle --outdirdist'",
は
"watch": "concurrently npm:watch:ngc npm:watch:app", "watch:ngc": "ngc --watch --project tsconfig.app.json", "watch:app": "esbuild --watch out-tsc/app.js --bundle --outdirdist",
と書く事ができます。 ダブルクォートとシングルクォートの入れ子がなくなるので、スクリプトが読みやすくなります。
colored prefixes
concurretlyを経由してコマンドを実行すると、出力の色情報が失われます。 変わりと言っては何ですがプレフィクス部分に色をつける機能があります。
たとえば、次のように-c 'green,yellow'オプションをつけます。
"watch": "concurrently npm:watch:ngc npm:watch:app -c 'green,yellow'", "watch:ngc": "ngc --watch --project tsconfig.app.json", "watch:app": "esbuild --watch out-tsc/app.js --bundle --outdir=dist",
すると、並列に起動したコマンド事に色を変えてくれます。 色の指定は、カンマ区切りで行い、指定した順番に使われます。 ほかにも背景色をつけたり、太字にしたいすることもできます。 詳しくはREADMEを見てください。
Shortened NPM run command with wildcard
npmコマンドを指定するときはワイルドカードが使えます。
たとえば、次のようにnpm:watch:*を指定します。
"watch": "concurrently npm:watch:*", "watch:ngc": "ngc --watch --project tsconfig.app.json", "watch:app": "esbuild --watch out-tsc/app.js --bundle --outdir=dist",
^C PS C:\dev\bm\server> npm run watch > watch > concurrently npm:watch:* [watch:app] [watch:app] > watch:app [watch:app] > esbuild --watch out-tsc/app.js --bundle --outdir=dist [watch:app] [watch:ngc] [watch:ngc] > watch:ngc [watch:ngc] > ngc --watch --project tsconfig.app.json
watch対象が2つではなく、もっとたくさんあるときに使うと便利です。 しかし、残念なことにワイルドカードと色を同時に使うと、ワイルドカードでまとめたグループが一色になります。
