npm-run-all v1.2.8 を試す
npm-run-all と concurrently を試す で npm-run-all の watchify 終了に問題があることを書いたら作者である mysticatea さんから調査してみる旨、コメントをいただいた。
その後どうなったかな？と npm-run-all のリポジトリをチェックしてみたら Fix: ignores killed tasks. というコミットが。どうやら終了コードが null の場合でも 0 と同様に処理するよう変更したらしい。おそらくこの対応により watchify のプロセスが完全終了しない問題も直るはず。
というわけで改めて npm-run-all v1.2.8 による watchify を含めたファイル監視と終了を試してみた。npm-scipts は以下のように定義。
"scripts": {
"start": "npm run watch",
"watch:css": "watch \"npm run build:css\" ./src/stylus/",
"watch:js": "watchify -v -t babelify ./src/js/App.js -o \"exorcist ./src/bundle.js.map > ./src/bundle.js\" -d",
"watch:server": "browser-sync start --server src",
"watch": "npm-run-all -p watch:css watch:js watch:server"
}実行してから JavaScript の編集と保存を実行して watchify による監視とコンパイルが動作することを確認。その後に Ctrl + C で中断してみる。
$ npm start
> front-end-starter@1.0.2 start /examples-web-app/front-end-starter
> npm run watch
> front-end-starter@1.0.2 watch /examples-web-app/front-end-starter
> npm-run-all -p watch:css watch:js watch:server
> front-end-starter@1.0.2 watch:css /examples-web-app/front-end-starter
> watch "npm run build:css" ./src/stylus/
> front-end-starter@1.0.2 watch:js /examples-web-app/front-end-starter
> watchify -v -t babelify ./src/js/App.js -o "exorcist ./src/bundle.js.map > ./src/bundle.js" -d
> front-end-starter@1.0.2 watch:server /examples-web-app/front-end-starter
> browser-sync start --server src
> Watching ./src/stylus/
> front-end-starter@1.0.2 build:css /examples-web-app/front-end-starter
> stylus -c ./src/stylus/App.styl -o ./src/bundle.css -m
compiled ./src/bundle.css
generated ./src/bundle.css.map
[BS] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.0.5:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.5:3001
------------------------------------
[BS] Serving files from: src
10290 bytes written to exorcist ./src/bundle.js.map > ./src/bundle.js (1.15 seconds)
10380 bytes written to exorcist ./src/bundle.js.map > ./src/bundle.js (0.11 seconds)
10290 bytes written to exorcist ./src/bundle.js.map > ./src/bundle.js (0.09 seconds)
^Cnpm-run-all v1.2.6 で発生していたエラーは起きず正常終了されている。つまり mysticatea さんの修正は有効だった。v1.2.8 ならば元記事のように watch だけ concurrently にする必要もない。npm-scripts の直列・並列実行はすべて npm-run-all へ統一できそうだ。というわけでそれを反映したサンプルを以下に公開。
元記事とそれを書く契機となった gulp なしの Web フロントエンド開発 にもこのの修正に関して追記する予定。
mysticatea さん、調査と修正ありがとうございました。