[npm & Bower] npm: run-script でタスクランナーから解放される

2周遅れくらいでやっと追いついた。

[markdown]
管理するファイルが多すぎてつかれたおじさんに一筋の光明。

> [Grunt/Gulpで憔悴したおっさんの話 – MOL](http://t32k.me/mol/log/npm-run-script/)
>
> 普通に元のコマンド叩いたらいいじゃんって思うんです。

助かる！

## とりあえず run-script してみる

package.json を作成する。

“`prettyprinted
% npm init
“`

パッケージをインストール。
“`prettyprinted
% npm install –save-dev stylestats mocha watch
“`

package.json を開くと `scripts` とあるので、このような形で書いてみる。

“`javascript:package.json
“scripts”: {
“style”: “stylestats build/stylesheets/all.css”,
“test”: “mocha test/**.js”
},
“`

ファイルなどは適当に用意して実行。

“`prettyprinted
% npm run style
> bp-middleman@0.1.0 style /Users/****/projects/middleman
> stylestats build/stylesheets/all.css
:
% npm run test
> bp-middleman@0.1.0 test /Users/****/projects/middleman
> mocha test/**.js
:
“`

## config

config フィールドに記述。
scripts フィールドで `$npm_package_config_NAME` のように使う。

“`javascript:package.json
“config”: {
“css_dir”: “build/stylesheets”,
“test_dir”: “test”
},
“scripts”: {
“style”: “stylestats $npm_package_config_css_dir/all.css”,
“test”: “mocha $npm_package_config_test_dir/**.js”,
“`

ふむふむ。

## watch

先ほどまとめてインストールした [mikeal/watch](https://github.com/mikeal/watch) を利用。
タスクに意味はない。

“`javascript:package.json
“config”: {
“css_dir”: “build/stylesheets”,
“test_dir”: “test”
},
“scripts”: {
“style”: “stylestats $npm_package_config_css_dir/all.css”,
“test”: “mocha $npm_package_config_test_dir/**.js”,
“watch:css”: “watch ‘npm run style’ $npm_package_config_css_dir”,
“watch:js”: “watch ‘npm run test’ $npm_package_config_test_dir”,
“watch”: “npm run watch:js & npm run watch:css”
},
“`

実行。

“`prettyprinted
% npm run watch
> bp-middleman@0.1.0 watch /Users/****/projects/middleman
> npm run watch:js & npm run watch:css
:
“`

`ctrl + c` で止めて良いようだ。

## 設定した run-script をリストする

ほほう。

“`prettyprinted
% npm run
Lifecycle scripts included in bp-middleman:
test
mocha $npm_package_config_test_dir/**.js
available via `npm run-script`:
style
stylestats $npm_package_config_css_dir/all.css
watch:css
watch ‘npm run style’ $npm_package_config_css_dir
watch:js
watch ‘npm run test’ $npm_package_config_test_dir
watch
npm run watch:js & npm run watch:css
“`

> * [scripts | npm Documentation](https://docs.npmjs.com/misc/scripts)
> * [Node.js – npm-scriptsについて – Qiita](http://qiita.com/axross/items/a2a0d148e40b66074858)

タスクランナーの *-watch と *-shell に集約しようかと考えていましたが、npm だけでまかなえるものが多そうですね。

## 補遺

> * [Why npm Scripts? | CSS-Tricks](https://css-tricks.com/why-npm-scripts/)
いろいろ走らせるときには、parallelshell を使った方が良い。
> * [keithamus/parallelshell: Run multiple shell commands in parallel](https://github.com/keithamus/parallelshell)
[/markdown]