TECH BOX

Technology blog from Web Engineer

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

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というモジュールを使って組み合わせることもできます。

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

  • コマンド1:a + b
  • コマンド2:b + c

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

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/**"
}

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

  • “a”: webpackを実行
  • “b”: 画像を何かする
  • “c”: サイトマップを作成する
  • “d”: hogeディレクトリ内を削除する

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

  1. “-s d a”を実行(-s = 順列処理)
    1. “d”が終了したら”a”を実行
  2. 1.が終了したら”-p b c”を実行(-p = 並列処理)
    1. “b”と”c”を同時に実行

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

ワイルドカードで一気に実行可能

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

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

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

使用上の注意

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

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