【npmスクリプトを並列実行！】npm-run-allの使い方

npmスクリプトで、同じようなタスクがあり「一気に実行しちゃいたい」みたいなことはないでしょうか？

そんなときはnpm-run-allを使うとスクリプトを並列で一気に実行することができます！

この記事では、スクリプトの並列実行の方法を中心にnpm-run-allの使い方を紹介します！

ひらべー

この記事は、こんな人にオススメ！

・npm scriptの実行時間が長い（並列化したい）

・npm scriptの数が多くメンテが大変

サンプル

  "scripts": {
    "task1": "echo 1",
    "task2": "echo 2",
    "task3": "echo 3"
  },

この３つのスクリプトがある場合を考えてみます。

このスクリプトをすべて実行するには

$ npm run task1 && npm run task2 && npm run task3

このように実行しなければならず、タスクの増減を考えると管理が大変ですし、
１つ１つの実行時間が長いとなかなか終わりません。。。

導入方法

まずは導入方法です。

$ npm i -D npm-run-all

実行が完了するとpackage.jsonに以下のように依存が追加されます。

  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }

並列実行

導入が済んだところで早速サンプルの３つのスクリプトを並列で動かしてみようと思います。

package.jsonに以下のスクリプトを追加します。

  "scripts": {
    ...
    "run-all": "run-p task1 task2 task3"
  }

run-p のあとにスクリプトを列挙することで、列挙したスクリプトを並列で実行することができます…！

簡単！！

*でスクリプトの管理を楽に

並列で実行はできるようになりましたが、このままだとスクリプトが増えるたびにrun-pの引数に追加をしなければなりません。

npm-run-allでは*を使ってこの課題を解消できます。

先に具体的な方法を紹介します。

以下のようにtask1をtask:1のように定義しなおし、run-pの引数の指定方法を変えてみましょう。

  "scripts": {
    "task:1": "echo 1",
    "task:2": "echo 2",
    "task:3": "echo 3",
    "run-all": "run-p task:*"
  },

このように、:区切りにすることによってtask:xxxで定義されたスクリプトを一括で指定することができます！

ちなみに"task:1:1"のように:が複数含まれるスクリプトも一気に並列化したい場合は、
**を使うことで実現できます。

  "scripts": {
    "task:1": "echo 1",
    "task:2": "echo 2",
    "task:3": "echo 3",
    "task:1:1": "echo 1-1",
    "task:1:2": "echo 1-2",
    "run-all": "run-p task:**"
  }

configを使ってスクリプトをテンプレ化

npmのconfigの仕組みを使うと管理がもっと楽になります。

こちらも先に具体例を紹介すると

  "scripts": {
    "task-template": "echo $npm_config_number",
    "task:1": "npm run task-template --number=1",
    "task:2": "npm run task-template --number=2",
    "task:3": "npm run task-template --number=3",
    "run-all": "run-p task:*"
  },

このようにスクリプトをテンプレート化して、個々のスクリプトでは可変の部分だけ意識すれば良いようにできます！

こうしておけばスクリプトの実行内容を変えたいときに基本テンプレートのスクリプトを変更するだけで良くなります！

並列数を変更する

npm-run-allではデフォルトで無制限に並列化を行います。

ただ、並列数が多すぎると逆に遅くなったり思わぬ負荷をかけてしまったりすることがあるので、並列数を指定しておくことをオススメします。

指定方法は簡単で--max-parallel 並列数でOKです！
以下は並列数を２に変更する例です。

  "scripts": {
    ...
    "run-all": "run-p --max-parallel 2 task:*"
  }

順次実行

ここまでは並列実行の方法を解説しましたが、並列化しなくとも「スクリプトを１つずつ順番に実行したい！」ということもあると思います。

そんなときはrun-sを使いましょう！

run-sもrun-pと同じようにタスクを列挙したり*で一気に指定することができます。

  "scripts": {
    ...
    "run-s-sample1": "run-s task:1 task:2 task:3",
    "run-s-sample2": "run-s task:*"
  }

実行順を制御する

実行順を制御したい場合は、
・スクリプトを列挙する場合は、実行したい順にスクリプトを列挙
・*や**を使用する場合は、実行したい順にpackage.jsonにスクリプトを定義
しましょう！