2016-10-09

Babel を試す環境に Gulp-Plumber を入れて自動ビルドに備える

前回の記事で、Babel を使って ES2015 の記法で書いたファイルを ES5 の記法に直す環境ができた。

Babel にリベンジ！ES2015 ってやつを勉強する環境を作るぜ！

今回はこのトランスパイルを、ファイルが更新されたときに自動的に行うようにしたい。

Browserify とか Watchify とか

これらはある一つのファイル (エントリーポイント) から別のファイルを require ないしは import する作りにしておく。変換させると、読み込んだ別ファイルごとまとめて1つのファイルにしてくれる。

Web サイトを作るにあたってはこうした作りでも構わないのだろうが、今のところは「ES2015 の記法をサクッと試したい」のが目的であり、全く新しいファイルを作っては色んなコードを書いて、変換された結果を確認したりしたい。

だから Browserify や Watchify でファイルを結合したい欲がなかったので、今回は流した。単純に gulp.watch() を使うことにする。

Gulp-Plumber で `gulp.watch()` が止まらないようにする

Gulp-Plumber という Gulp プラグインを入れると、ファイルの変更時に gulp.watch() でエラーが出た場合でも、ファイルの監視を止めないようにしてくれる。まずはこれを入れてみる。

$ npm i -D gulp-plumber

次に gulpfile.babel.js に書いた build タスクに Gulp-Plumber を追加する。

gulp.task("build", () =>
  gulp.src("src/scripts/**/*.js")
      .pipe($.plumber())    // Gulp-Plumber をかませてファイル変更時のエラー回避
      .pipe($.babel())
      .pipe(gulp.dest("dist/scripts"))
);

ここまでで、gulp build を叩いた時に正常時は挙動が変わらないことを確認しておく。

watch タスクを作る

以下のように watch コマンドを書く。

gulp.task("watch", function() {
  gulp.watch("src/scripts/**/*.js", ["build"]);
});

このタスクをコンソールから呼んでおくと、src/scripts/ 配下の.jsファイルの変更に合わせてbuild` タスクが動く。なんか Ctrl + C で停止するときの効きが悪いような。しばらく待つと効くんだけど、なんだこれ。

$ gulp watch

[14:20:38] Requiring external module babel-register
[14:20:39] Using gulpfile P:\BabelES2015Test\gulpfile.babel.js
[14:20:39] Starting 'watch'...
[14:20:39] Finished 'watch' after 13 ms

watch タスクを立ち上げたまま、src/scripts/sample.js の中身を適当に間違えて保存してみる。

# 自動的に build タスクが動く
[14:20:43] Starting 'build'...
[14:20:43] Plumber found unhandled error:
 SyntaxError in plugin 'gulp-babel'
Message:
    P:\BabelES2015Test\src\scripts\sample.js: Unexpected token (5:16)
[14:20:43] Finished 'build' after 172 ms

このように、ファイル中のエラーを検知してビルドが中止されたことが分かる。次は正しく直して保存。

[14:20:50] Starting 'build'...
[14:20:50] Finished 'build' after 76 ms
# 正常終了した。

デフォルトタスクを作る

gulp watch と打たずに gulp と打っただけで動いてくれるように、default タスクを書く。

gulp.task("default", ["watch"]);

これで gulp とコマンドを打ってみる。

$ gulp

[14:35:28] Requiring external module babel-register
[14:35:29] Using gulpfile P:\BabelES2015Test\gulpfile.babel.js
[14:35:29] Starting 'watch'...
[14:35:29] Finished 'watch' after 15 ms
[14:35:29] Starting 'default'...
[14:35:29] Finished 'default' after 16 μs

おっけ～。これで ES2015 の記法をアレコレ試して、保存した瞬間に変換させることができるようになった。

リポジトリをドウゾ

ここまでの内容を以下の GitHub リポジトリに格納しておいた。