npm はパッケージ依存管理ツールであると同時に、便利なタスク・ランナーです。
本体はごく基礎的な機能だけを持ち、npm が管理するパッケージと Shell の力を組み合わせてタスクを定義します。「npm-scripts で利用する CLI コマンドは npm で管理できる」という分かりやすさが気に入っています。
npm-scripts には以下の特徴があります。
- 多くのツールが CLI を持っているためにラッパープラグインが不要です。Gulp ラッパー プラグインは非公式であることも多く、メンテナンスが継続するか不安な場合があります。
- 簡潔です。Gulp で書くと数十行だった処理が数行になるなんてこともよくあります。
- 複雑なことをするには向いていないです。
- 環境変数の扱いに難があります。
この記事では、私が npm-scripts を書くときによく利用している便利ツールたちを紹介します。
汎用的なものを集めました。
npm-run-all
複数のタスクを並列・直列にまとめて実行する便利ツールです。
Glob のようなパターンマッチを使うことができます (Glob との違いは、区切り文字が/ではなく:であることです)。
$ npm-run-all foo bar baz
$ npm-run-all build:*
$ npm-run-all --parallel watch:*
$ run-s build:* # "npm-run-all build:*" と同じです
$ run-p watch:* # "npm-run-all --parallel watch:*" と同じです
また、cmd.exe と sh とで挙動が違う & の代わりに使うことができます。
cross-env
環境変数を設定しつつ指定したコマンドを実行するツールです。
$ cross-env NODE_ENV=production babel src --out-dir lib
$ cross-env NODE_ENV=development babel src --out-dir lib --source-maps inline --watch
環境変数を設定する方法は cmd.exe と sh とで異なっていますが、cross-envはクロスプラットフォームで動作します。
chokidar-cli
ファイルの変更を監視して、ファイル変更時に任意のコマンドを実行するツールです。
監視機構を内蔵していない CLI ツールと併用すると便利です。
$ chokidar "lib/**/*.js" --command "eslint lib"
opener
ブラウザを開くツールです。
URL, 相対パスを指定できます。
また、どのブラウザで開くかも指定できます。
$ opener http://localhost:8080
$ opener ./coverage/lcov-report/index.html
$ opener chrome http://www.google.com
wait-on
指定したファイル・URL・TCP ソケット等が使えるようになるまで待機するツールです。
前述の opener と組み合わせると便利です。
{
"start": "npm-run-all --parallel start:*",
"start:server": "node-dev server.js",
"start:client": "wait-on http://localhost:8080 && opener http://localhost:8080"
}
cpx
指定したファイル群を、ディレクトリ構造を保ったままコピーするツールです。
変更監視して変更時だけコピーすることもできます。
$ cpx "src/**/*.js" app --watch
# Browserify 互換の変換モジュールを噛ませることができます。
$ cpx "src/**/*.js" app -t hogehogefy --watch
if-node-version
実行している Node.js のバージョンが指定したものだったときだけ後続するコマンドを実行します。
$ if-node-version ">=4" eslint lib
バージョンの指定は package.json で使うのと同じ semver 範囲指定で行います。
rimraf
rm -rf を実行するツールです。
Windows のお供に。
$ rimraf dist coverage
私はよく npm run clean を書くために使います。
mkdirp
mkdir -p を実行するツールです。
Windows のお供に。
$ mkdirp app/client app/server
shelljs
複雑なことを実施したい場合には、ShellJS を利用するのがお手軽です。
Gulp のようなものを使ってもいいですが、ShellJS は CLI がそのまま使えるのでメンテ不安が少ないです。