Gulp & Webpack 基本

Gulp とは

フロントエンドにおける便利な開発環境を整えてくれるタスクランナーと呼ばれるもの。
タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれるタスク自動化のツールです。

Gulp はタスクの自動化の仕組みを提供する

制作途中においては「プログラムを一行だけ追加してブラウザで確認する」ようなシーンが頻繁にあります。 しかし、プログラムを一行変更する度に上記のような「一手間」を人手で行うのは、まさに「手間」です。 そこで、それらの作業を自動化する仕組みを提供してくれるのが、本稿のテーマである「Gulp」というわけです。
Gulp では、WEB制作の中で行う作業のことを「タスク」と呼んでいます。

Gulp では「どのファイルを」「どのように加工して」「どのように出力するか」を一つのタスクとし、そのタスクを gulpfile.js という名前のファイルに JavaScript で表現します。「タスク」として JavaScript でコード化しておき、あとは必要な時にタスクを呼び出せば良いというわけです。

Sassを変換（コンパイル）
複数のJavaScriptのファイルを1つのJavaScriptのファイルにまとめる
CSS・JavaScriptのファイルや画像の圧縮
ローカルサーバーを立ちあげる

上記のようなことができる。

また Gulp にはファイルの監視機能 (Watch) があり、ファイルが変更されるたびに自動的にタスクを実行する仕組みがあります。 これにより、ファイルを変更するたびに上のようなコマンドを実行する必要が無くなります。 この監視機能により、プログラマはコーディングに集中でき、Minify などの実行を気にする必要がなくなります。

GulpとWebpackの違い

そもそもGulpというものはタスクランナーと呼ばれている通り、様々なタスクを定義してその定義されたタスクの通り処理をしてくれるものです。
対してwebpackは、バンドルツールなのでバンドルに特化していて、モジュール同士の依存関係をうまい具合に、かつ速く一枚のJavaScriptファイルにバンドルしてくれるものです。

webpackのバンドルが速いという話が出ましたが、なぜかと言うとwebpackのwatchモードでは差分ビルドといって前回保存分と今回の保存分との差のみバンドルしてくれるから。

Webpackとは

ホームページを作るためには、HTMLファイルだけでなく、CSSやJavaScript、画像やWebフォントなど、さまざまなファイルを用意する必要があります。こうしたWebで必要なファイルをワンパッケージにまとめてくれる便利なものがWebpackです。

Webpackとは、CSSやJavaScript、画像などWebコンテンツを構成するあらゆるファイル(アセット)を「モジュール」という単位で取り扱い「バンドル」という１つのファイルに最適な形で変換するためのツールです。（バンドルとは複数ファイルを1枚のファイルにまとめること）

なぜwebpackを使うのか

・機能ごとにファイルを分割（モジュール化）する開発ができるから
・ジュール（npmなどでインストールできるパッケージなど）も利用できるから
・リクエスト数を減らせるから
・依存関係を解決したファイルを出力できるから
などモジュールの開発、再利用、バンドルなどが魅力的だから。

例えば、１つのJavaScriptファイルに長い処理を書くと、可読性が悪くなり、バグが生まれやすくなったり、結果的に開発スピードが遅くなったりする原因になります。
これを解決するために、「モジュール」という単位でJavaScriptを複数ファイルに分割して開発することがあります。
こうすれば、エラーが起こったり仕様変更をした場合に、どのモジュールを修正すればいいのかが分かり、開発スピードが早くなります。

また、その他にもnpmでパッケージを入れて設定を書けば、新しいJavaScriptの書き方で書いたものを対応ブラウザに合うJavaScriptの書き方にトランスパイル（変換）してくれたり、SassをCSSにコンパイル（変換）してくれたり、ローカルサーバーを立ち上げられたりします。

各用語

モジュール
機能ごとに分割されたファイルのこと。
そのため、webpackは「複数のファイルをまとめたファイル」を出力するツールと認識しておけばとりあえずは問題ない。

バンドル
まとめられたファイルのこと。バンドルファイルとも言う。

バンドルする
「まとめる」という意味で使われていることが多い。

ビルド
webpackにおいての「ビルド」は「バンドルを出力するまでの一連の処理」という意味で使われていることが多い（気がする）。

各ファイルの詳細

webpack.config.js（webpackの設定ファイル）
webpackを利用するためにはwebpack.config.jsというファイルに設定を記述する必要がある。

webpack.config.js

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/js/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（絶対パスを指定する必要がある）
    path: path.join(__dirname, 'public/js')
  }
};

mode
モード（webpack 4から追加された項目）の設定。
モードはdevelopment、production、noneが存在する。

developmentかproductionを指定すると、様々な設定が有効になってwebpackが実行される。
例えば、productionにすればoptimization.minimizerという設定が有効になり、圧縮されたファイルが出力される。

設定は上書き可能であり、上書きしたい項目はwebpack.config.jsに記述する（詳細は後述）。

entry
エントリーポイントの設定。 複数設定することも可能。
エントリーポイントとはモジュール間の依存関係の解析を開始する地点のこと。
各モジュールを読み込んでメインの処理をするJavaScriptファイルだと認識しておけば良い。

output
出力の設定。
出力するファイル名や出力先のパスを指定する。
依存関係のあるファイルをまとめたものが「Output」で指定したフォルダにファイル名で吐き出される
OSによってパスが異なることを防ぐために、出力先のパスの指定にはpath.join()を利用する。

Loaders 画像やCSSなどのJavaScript以外のファイルをJavaScriptで扱えるように変換したり、バンドルする前にモジュールに対して実行する機能のこと。TypeScriptをJavaScriptに変換、画像をDataURLに変換、コードをチェックするなど、ローダーによって機能は様々。

Plugins モジュールのバンドル時に実行される様々な処理。バンドル時にやりたい処理を呼び出す。

resolve 特定の処理の指定、定義するやつ

Browser Compatibility（どのブラウザに対応するか）

Node.jsのenvとは

Node.jsの環境変数は、process.envというオブジェクトに格納されます。
環境変数というのは、アプリケーションを動作させる際の最も基本的な設定内容が入った箱のようなものです。

productionを指定すると本番環境を意味します。
developmentを指定すると開発環境を意味します。
指定した内容に基づいた環境設定の動作を反映させることができます。

webpack-dev-serverとは

簡易的にサーバーを立ち上げつつ「webpack」コマンドを実行してくれるもの

npmとは?

npmの正式名称は、Node Package Manager
Node.jsはさまざまなシーンで便利に利用できるプログラムのかたまりをパッケージという単位にまとめて配布されている。
npmの正式名称からも解るように、Node.jsのパッケージ（Package）を管理する（Manager）ツール

npm installとは（する理由）

package.jsonの内容に沿って必要なパッケージを自動インストールできる
pmリポジトリからライブラリをダウンロードしてくるコマンド

npm scriptsとは（設定する理由）

scriptの中に実行したいコマンドを定義しておくことが可能になる。
npm runコマンドで呼び出すことができる。

watchモード

###npm run watchとは
開発用のコマンドで、ファイルの変更を監視してブラウザに自動的に反映してくれる

npm run buildとは

本番公開用のコマンドで、トランスパイルされ圧縮をして「public」フォルダに吐き出す

Babelとは？

簡潔にいうと、JavaScriptのコードを新しい書き方から古い書き方へと変換するツールです。
基本的にはwebpackの設定ファイルは「webpack.config.js」と「webpack.config.babel.js」

ただJavaScriptの仕様は常にアップデートされ便利な機能が追加されます。今の段階では、基本的にES2015（ES6）以降の書き方でJavaScriptのコードを書いたら、対象とするブラウザで認識できるJavaScriptのコードにトランスパイル（変換）します。そのトランスパイルをしてくれるものが、Babelです。

参考

webpack 4 入門
Gulpで始めるwebpack 4入門
最新版で学ぶwebpack 4入門 JavaScriptのモジュールバンドラ
タスク自動化ツールgulpを使って制作時間を短縮しよう
フロントエンド開発の３ステップ（npmことはじめ）
フロントエンドエンジニア必見！JavaScript開発現場で人気の「Webpack」とは？
【５分でなんとなく理解！】Webpack入門
【５分でなんとなく理解！】Babel入門
環境設定を行う！Node.jsのenvの使い方【初心者向け】