この記事は最終更新日から7年以上経過しているため正確ではないかもしれません

npm scriptsを使ってグローバルのモジュール依存から脱却しよう

gulpのようなタスクランナーやwebpackのようなモジュールハンドラーを使ってウェブ制作をする機会は多いと思います。

その際のビルド命令はgulp fooとかwebpackとか命令してる人も多いはず。
この場合、グローバルにgulpやwebpackが入っていないと動きません。

$ npm i -D gulp
# これだけだとgulp fooは動かない

$ npm i g gulp
# gulp foo動く

グローバルにモジュールをインストールすると、別のプロジェクトでバージョンが違うとそのバージョンに合わせて再インストールする必要が出てきたりするかもしれません。
そうなるとグローバルの管理が煩雑になっていきますし、他人と環境を合わせる際に動く動かないといった原因にもなりかねません。

そこで、npm scriptsを利用することでこれらを解決することができます。

npm scriptsとは？

package.jsonのscriptsに実行命令分を書くことでプロジェクトにインストールしたモジュールのCLIを実行することができます。

プロジェクトにgulpインストール

$ npm i -D gulp

package.json

"scripts": {
  "start": "gulp foo"
}

実行コマンド

$ npm run start

上記の場合、プロジェクトにインストールしたgulpのCLIを実行するので、グローバルにgulpをインストールする必要がない。

$ npm run start

実行方法はnpm run xxxで動作します。
もちろん、package.jsonのscriptsに記述していないコマンドは実行できません。
また、オプションを渡すこともできるので柔軟な作りを行うことも可能です。

package.jsonのscriptsに"start": "gulp"と書いてあった場合

# npm scriptsコマンド
$ npm run start -- --foobar

# ↓実際にはgulpコマンドに--foobarオプションを渡して実行する
$ gulp "--foobar"

複数のコマンドを組み合わせて実行したい場合、ワンライナーで書くという手もありますが、コマンドを分割してnpm-run-allというモジュールを使って組み合わせることもできます。

例えば、下記のような組み合わせがある特に有効です。

また、シーケンシャル(順列)とパラレル(並列)処理もできます。

npm-run-allはインストールしないとしないと使えないので下記コマンドでインストール。

$ npm i -D npm-run-all
# or
$ yarn add npm-run-all -D

使い方は公式ドキュメントを見たほうが早いのでかんたんな使い方のみ紹介

npm-run-allでは順列処理(シーケンシャル)と並列処理(パラレル)を使い分けることができます。

"scripts": {
  "build": "npm-run-all -s d a -p b c",
  "a": "webpack",
  "b": "gulp image",
  "c": "gulp sitemap",
  "d": "rimraf hoge/**"
}

かんたんな例として上記のようなコマンドを用意します。

$ npm run buildを実行すると下記のように実行します。

オプションを駆使することで実行する順番を指定したコマンドを作ることができます。

npm run build:*といったワイルドカードの指定ができる。
こんなscriptコマンドを用意しておく。

"scripts": {
  "build": "npm-run-all -p _build:*",
  "_build:a": "gulp",
  "_build:b": "webpack"
}

$ npm run buildで実行すると_build:のついたコマンドを実行します。

コマンド文をワンライナーで記述するため、複雑なことを書こうとしたり、分割しすぎるとメンテナンスが大変になるので、バランスよくすることが大事です。

また、ここで挙げた以外でもできることはあるので、npm script上級者になりたい人は公式サイトも参考にしてください。