ビルドツールとしてnpmを使う

2015-04-19

Grunt、 gulpなどを使うのではなく、npmをビルドタスクを使うためにちょっとおさらいした。

npmのpath

npmでインストールすると、
モジュールは ./node_modules/にインストールされ、
node_modules/.bin配下に各パッケージのbinへのシンボリックリンクが作成される。

これは実際にnpm binを実行するとパスがわかる。

たとえば、node_modules/jshint/bin/jshint は$(npm bin)/jshintで実行できる。
実際にはnpm経由で実行すると、$(npm bin)はPATHは追加されている。

package.jsonに以下を追加して

でパスが通っていることが確認できる。

つまり、npm run TASKではモジュールのパスに$(npm bin)は必要無い。

npmコマンドにpre、postというprefixをつけることでそのコマンドの前後にフックできる。
たとえば、npm testにpre postそれぞれのフックを追加すると、

npm test を実行すると、 npm run pretest、 npm test, npm run posttest の順番に実行される。

「–」で好きな引数を渡すことができる。
たとえば以下のうように

例があまり良くないけど、開発環境やstaging環境などの実行環境でオプションの有無がある場合などに便利。

package.jsonにあるconfigはスクリプトからnpm_package_config_NAMEとして参照できる

とある場合、

とすることで参照できる。

各モジュールの設定はpackage.jsonにまとめておくことができる。
.configのようにconfig系のファイルがプロジェクトルートにたくさん作りたくないので、便利。

また、設定したconfigの値はユーザーの$HOMEにある.npmrcの値によて実行時に上書きされる。

これで

となる。各自の環境に合わせた状態などはここで上書きするなどができる感じ。

マルチタスクはpre、postフックでタスクを実行するほかに&&演算子でつなげていけば可能。

また、標準出力、標準入力、リダレクトをつかってgulpのようにシームレスに処理できる。

ファイル監視はwatchやnodemonなどを使う。

フロントエンドのビルドツールはGruntやgulp、webpackを使う規模でなければnpmだけでもいけそう。