Gulp（タスクランナー）を使って処理を自動化させる

開発時には、コンパイルの処理を自動化するのがやっぱり楽です。そういったタスクはGulpに任せるのが一般的なようです。

ファイルの監視は「gulp-watch」を使う

gulpで標準に組み込まれているwatchは、新規ファイルを監視してくれません。しかしながら、「gulp-watch」は監視タスク実行後に追加したファイルも監視対象下に含めてくれるため積極的にこちらを利用します。

Gulp上でwebpackを実行する「gulp-webpack」はwebpack2系には未対応

Gulpからwebpackを実行するにはgulp-webpackというプラグインを使用します。しかしながら現在のところ、gulp-webpackはwebpack２系には対応していません（2017年4月現在）。

【追記：2017.11】
とかなんとか言ってる間に、Webpack3なるものがリリースされちゃってました。早いな！

で、Gulpさんとの相性はどうなんだい！？て、ところなんですが、npmライブラリの「gulp-webpack」のページ（下の画像）からgithubのリンクをクリックすると、しれっと「webpack-stream」に飛ばされます。

要は、今後はこいつ（webpack-stream）を使え！って、ことなんでしょうな。「いずれ対応するんじゃ…」とか言ってた私。。。（下段参照）

あくまでも現在はです。いずれ対応すると思いますので、まずはgulp-webpackをつかった方法を紹介します。
※webpack-streamを使った方法はその後に書いてあります、念のため。webpack3でもやり方はほぼ同じです。

webpack2.0未満の場合はgulp-webpackで問題なし

下記の必要なプラグインをnpmを使ってインストールします。

• gulp（当然）
• gulp-webpack（gulpからwebpackを実行）
• gulp-watch（ファイルの変更を監視）
• gulp-plumber（エラーが出て監視が止まってしまうのを防ぐ）
• coffee-script（gulpfileをいつもCoffeeScriptで書いている人は必要）

npm install --save-dev gulp gulp-webpack gulp-watch gulp-plumber coffee-script

これを使って監視タスクを定義します。

JavaScriptファイル（CoffeeScriptで記述されたもの含む）に変更・追加があれば、エントリーポイントとなるファイル（この場合、entry.coffee）の内容をwebpackを使ってコンパイルする。と、いう流れです。

# gulpfile.coffee

g = require "gulp"
webpack = require "gulp-webpack"
watch = require "gulp-watch"
plumber = require "gulp-plumber"

g.task "default", ->
  return watch ["./src/**/*.coffee", "./src/**/*.js"], ->
    g.src "./src/entry.coffee"
    .pipe plumber()
    .pipe webpack require('./webpack.config.coffee')
    .pipe g.dest "./dist"

しかし上述の通り、コンパイルされたファイルはwebpack1系を通してできたものになります。

では、webpack2を使用するにはどうするのか

この場合は、gulp-webpackではなく、gulp上でwebpackをストリームとして実行するプラグイン「webpack-stream」を使います。

npm: webpack-stream

$ npm install --save-dev webpack-stream

このプラグインを使って先程のgulpfileを下記のように書き換えます。基本的には先程の例と同じです。

# 使いたいバージョンのwebpackを読み込む
# ここでは2系を使う
webpack2 = require 'webpack'
webpackStream = require 'webpack-stream'

g.task 'webpack', ->
  return watch ['./src/**/*.coffee', './src/**/*.js'], ->
    g.src './src/entry.coffee'
    .pipe plumber()
    .pipe webpackStream require('./webpack.config.coffee'), webpack2
    .pipe g.dest './dist'

使いたいバージョンのwebpackがある場合は、webpack-streamの第2引数に任意のバージョンのwebpackを指定します（例ではwebpack2）。

そのままでいい場合は引数を指定する必要はありません。

.pipe webpackStream require('./webpack.config.coffee')
.pipe g.dest './dist'

以上のような方法を用いれば、gulpでファイルの変更を監視しながらwebpackでのコンパイルが可能になります。