【npm-run-all】npm-scriptsで複数の処理を一つのコマンドで同時に実行する方法

npm-run-allという複数のスクリプトを一度に実行するためのツールを紹介します。
npm-run-allを使用することで、処理スピードが向上し、npm-scriptsの可読性が良くなり、効率的に開発を行うことができるようになります。

Node.jsのバージョン管理ツール「Volta」のインストール・導入方法・使い方を解説

【初心者】npm-scriptsの使い方、web製作・webデザイナー・コーダー向けに1番分かりやすく解説

INDEX

npm-run-allとは

npm-run-all公式

npm-run-allとは複数のnpm-scriptsを並列または順次実行する CLI ツールです。

複数のスクリプトを同時に実行する方法はnpm-run-allを使用しなくても行うことができますが、このツールを利用することで以下のように大きなメリットがあります。

スクリプトを簡略化できる

npm-scriptsでは&&を使ってスクリプトを複数実行することができます。
しかし以下のようにnpm-run-allを使用するとnpm-scriptsをシンプルかつ可読性の高い形で記述することができます。

{  
  "scripts": {
    // npm-run-allを使用しない場合（before）
    "build": "npm run clean && npm run build:css && npm run build:js && npm run build:html",
    // npm-run-allを使用した場合（after）
    "build": "run-s clean build:*",
  },
 }

クロスプラットフォーム対応

npmのスクリプト内で&&演算子を使用する場合、Macでは動作しますが、Windowsでは正しく機能しない場合があります。
npm-run-allを使用することで、クロスプラットフォームで同じ挙動を実現することができます。

npm-run-allの準備

それではnpm-run-allを使用する準備を行いましょう。

package.jsonの作成

npm-run-allを実行するプロジェクトを作成します。

npm init -y

npm-run-allのインストール

以下のコマンドでnpm-run-allをインストールします。

npm i -D npm-run-all

複数のnpm-scriptsを準備

npm-run-allを実行するために、適当なscriptsを二つ以上作成しましょう。

{  
  "scripts": {
    "sample:1": "echo サンプル1",
    "sample:2": "echo サンプル2",
    "sample:3": "echo サンプル3"
  },
 }

npm-run-allの実行方法

それでは準備が整ったので実際にnpm-run-allを実行してみましょう。

npm-run-allには大きく順次実行・並列実行の実行方法があります。
さらに、同じグループを一括で指定するGlobライクな指定の方法もあります。
これらの方法をそれぞれ解説していきます。

順次実行（sequential）

順次実行では、スクリプトを1つずつ順番に実行します。
1つのスクリプトが完了すると、次のスクリプトが実行されます。
例えば、Sassをコンパイルした後にPostCSSを適用させる場合などの、処理に順番が重要な場合に使用します。

指定方法は以下のようにrun-sの後にスペース区切りで、scriptsに登録しているタスクを実行したい順番に記載します。

{  
  "scripts": {
    "sample:1": "echo サンプル1",
    "sample:2": "echo サンプル2",
    "sample:3": "echo サンプル3",
    "all:s": "run-s sample:1 sample:2 sample:3"
  },
 }

並列実行（parallel）

並列実行では、すべてのスクリプトを同時に実行します。
これにより、複数のタスクを同時に処理することができ、全体の処理時間を短縮できます。
順次実行をする必要がない場合は、こちらを使用します。この方法を使用することで、処理時間を短縮することが的、開発効率を向上させることができます。

指定方法はrun-pの後にスペース区切りで、scriptsに登録しているタスクを記載します。
scriptsの登録している順番は関係なくランダムに処理が実行されます。
実際に処理がランダムに実行されていることを確認してみましょう。

{  
  "scripts": {
    "sample:1": "echo サンプル1",
    "sample:2": "echo サンプル2",
    "sample:3": "echo サンプル3",
    "all:p": "run-p sample:1 sample:2 sample:3"
  },
 }

同じグループを一括で指定する（Globライクな指定）

最後に同じグループを一括で指定するGlobライクな指定方法を紹介します。
この方法を利用することでnpm-scripts自体が短くシンプルになり、可読性が向上します。
Globライクな指定方法を利用することでnpm-run-allを利点を十分に活用することができます。

指定方法は以下の二つの手順で行います。

実行させたいscriptsのタスク名を"sample:1"のように:で区切り、ラベリングします。
"all:s": "run-s sample:*"のように*でを使って同じグループのタスクを一括で指定する。

{  
  "scripts": {
    "sample:1": "echo サンプル1",
    "sample:2": "echo サンプル2",
    "sample:3": "echo サンプル3",
    "all:s": "run-s sample:*"
    "all:p": "run-p sample:*"
  },
 }

Globライクな指定方法

おわり

以上でnpm-run-allを使った複数タスクの実行方法の解説になります。

プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに生かしていいただけますと幸いです。