この記事はAdvent Calendar 2015 7日目の記事です。
http://www.adventar.org/calendars/1034
44です。今回は、フロントエンド界隈の勉強会でよく「WebPack,Grunt,Gulp」について調べてみました。
私はWebPackなどを「複雑化したフロントエンド開発をいい感じにしてくれるツール」というぐらいの認識でした。
WebPack,Grunt,Gulpは同じようなツールだと思っていました。一つ一つどういったものか説明していきたいと思います。
WebPackとは？
WebPackとはフロントエンドの”依存関係解決”ツールです。
BモジュールはAモジュールを利用している場合、BモジュールはAモジュールに依存しているということになります。規模が大きくなればなるほどモジュールは増え複雑化してきます。複数のJavaScriptファイルを１つにまとめるためのツールがWebPackです。
WebPackの特徴でloaderを使うとHTML,CSS,JSON,ES6など色々な形式のファイルを読み込むことができます。
Gulp,Gruntとは？
最近のフロントエンド開発では、Sassのコンパイル、JavaScriptファイルの依存解決、画像の圧縮、ブラウザの自動更新など開発するうえでの作業（タスク）が増えてきました。全てを一つ一つ手作業でしていると開発にかかる時間が増えるので,その作業を自動化するツールが「Glup,Grunt」です。
Gulp,Gruntの違い
記述方法
GulpはJavaScript形式、GruntはJSON形式で記述します。
GulpはJavaScript形式で書けるので書きやすいかもしれません。
処理方法
Gulp,GruntともにNode.jsで書かれているのですが、Gulpは非同期処理、Gruntは同期処理となってます。Gulpは並列でタスクを実行できるのでGruntに比べ処理時間が短いようです。
最後に
まだWebPack,Gulp,Gruntなどを使ったことはないのですが、これを機に触ってみようと思っています。次回は「flux」について調べようと思います。
最後まで読んでいただきありがとうございました。