@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

concurrently

www.npmjs.com

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モードでないビルドであれば、次のように書くとngcesbuildの順で逐次的に実行できます。

"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",

f:id:ledsun:20211001104920p:plain
プレフィクスに色をつけたときのconcurrentlyの実行画面

すると、並列に起動したコマンド事に色を変えてくれます。 色の指定は、カンマ区切りで行い、指定した順番に使われます。 ほかにも背景色をつけたり、太字にしたいすることもできます。 詳しくは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つではなく、もっとたくさんあるときに使うと便利です。 しかし、残念なことにワイルドカードと色を同時に使うと、ワイルドカードでまとめたグループが一色になります。

f:id:ledsun:20211001105822p:plain
ワイルドカードと色を同時に指定すると一色になる

参考