なんとな〜くgulpはタスクランナーでwebpackはモジュールバンドラだよねみたいなイメージあるけど何を以て使い分けているのかわからなかったので調べたまとめ
公式の見解
Grunt＝タスクランナー
GRUNT
The JavaScript Task Runner
Gulp
＝タスクランナー
※公式には明言なし。gulp.jsのwikipediaにはタスクランナーとの記述あり
gulp is an open-source JavaScript toolkit by Fractal Innovations[3] and the open source community at GitHub, used as a streaming build system in front-end web development.
rollup
＝モジュールバンドラ
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
browserify
公式には明言なし
Webpack
＝モジュールバンドラ
webpack is a module bundler.
Parcel
＝webアプリケーションバンドラ ←!?
驚くほど速く、設定不要なWebアプリケーションバンドラー
でどう違うのか
ビルドツール
単純にコンパイラ&リンカを指す場合と、ビルドを構成するタスクを定義・実行するツールを指す場合がある。タスク例：
・ソースファイルのコンパイル
・テストや静的解析
タスクランナー
フロントエンドの仕事で面倒なタスクを自動的にやってくれる便利なツールモジュールバンドラ
モジュールをひとまとめに（bundle）するツール。＝JSの依存関係を解決して、ひとつのファイルにまとめてくれるツール
ってなんとなくわかるようなわからんような感じでまとめてたら「Web Developer Roadmap 2019」にこのような図が！う〜ん、わかりやすい。
