npm-run-all
という複数のスクリプトを一度に実行するためのツールを紹介します。npm-run-all
を使用することで、処理スピードが向上し、npm-scriptsの可読性が良くなり、効率的に開発を行うことができるようになります。
なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。
INDEX
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:*"
},
}
おわり
以上でnpm-run-all
を使った複数タスクの実行方法の解説になります。
プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに生かしていいただけますと幸いです。