gulpとwebpackとnpm scriptの使い分け

Question

###前提・実現したいこと
サイトを作るときモジュールをまとめたり管理したいときには、gulpとwebpackとnpm scriptというツールを使ってやると簡単に管理したりできると知りました(解釈が間違っていたら教えてください。)。
この3つを組み合わせて使うという方法も検索したらあったのですが、場合で使い分けろという意見が多かったです。
「これらの3つはどのように使い分けるのか。それともどれかひとつだけでいいのか。」「具体的な場面やそれぞれの特徴」を教えてもらいたいと思ったので質問しまsした。

###発生している問題・エラーメッセージ

• 3つの管理ツールの使い分け、特徴などがわからない。

###該当のソースコード
ソースコードはないです。

###試したこと
検索していろいろな情報を見てみる。

###補足情報(言語/FW/ツール等のバージョンなど)
windows8を使っています。

Answer 1

gulp

タスクランナー
実際は単なるJavaScriptなので、下記のような流れるような事を数珠繋ぎに定義して保存しておくと後から同じファイル加工を何度でも行える。

AltJSをJSにコンパイル
→特定のディレクトリへ移動
→ファイル同士をconcatして一つのファイルに固めなおす
→1行に圧縮してファイルサイズを減らす
→難読化

webpack

配布物を生成する為のビルドツール
gulpはタスクランナーだけど、これの導入目的の9割は同じく配布物を生成する為のビルドツールとして使うわけで、競合ツールと認識してほぼ間違いない。

プロジェクトによってGulpとWebpackのどちらかを使い分ける感じ。
※そしてどっちでもいいし、どちらも使わずにNode.jsを使って自力コンパイルしてもいい。

npm script

これは単にpackage.jsonにコマンドを仕込めるよってだけの機能
例えば"build": "gulp build"等と記載しておけば、そのフォルダの配下で以下のコマンドでgulp buildが呼び出せるようになる。
npm run build => gulp build

えっ、なにそれ微妙じゃん…
いやいや、Node.jsを使うなら必須級の超重要項目ですよ。
絶対にGulpやWebpackのビルドツールと併用すべき。

なぜならば、package.jsonはプロジェクト内定義書といっても過言でない程の重要ファイル。
後からジョインしたメンバーはpackage.jsonを読んでプロジェクトの概要を理解するわけ。

package.json内のnpm scriptは目を通しておくべき1項目。
上記のnpm run buildはタイプ数が増えているので一見無駄なんだけど、
前任者がコマンドを保存しておくと、後からジョインしたメンバーはどんなTOOLやコマンドで配布物を生成しているか一目でわかる。