こんにちは、KEYチームの荒木です。先月来日していたPriyatamさんがタスクランナーでsassのコンパイルの遅さを指摘されていました。たしかにそうですね。では他の状況はどうかと思い、watchifyを使ったlivereload環境の速度と安定性について npmとgruntとgulpで比較してみることにしました。

比較

npmだけ

live-serverで環境を構築、速度を考えてwatchifyで差分ビルド。

保存した0.5から1秒後にリロードされました。起動も早いですし安定した動きですね。

grunt

yeomanによくあるconnect-livereloadで環境を構築。

かなり早いですね。押した瞬間にリロードされました。ですが、保存直後すぐに修正して保存した場合に限りリロードされても反映されませんでした。 すぐに修正することも少ないのでほとんど影響ない範囲ですね。

gulp その１ browser-sync

browser-syncを使ったlive環境

npmとかわりないですね。

gulp その２ gulp-live-server

gulp-live-serverをつかってもlive環境をつくれますのでやってみました。

QuickTimeで録画するとうまく動かず録画できませんでしたが、こちらもnpmと変わりないですね。

結論

transformするコード量は少ないですが、Gruntが少し早いていどでそんなに大差はなかったですね。 なにを採用しても良い環境は作れると感じました。

おすすめ

チョット書く程度でしたらnpmで。 タスクをキレイに整理して書きたいのならgulpでしょう！