gulp-watch + gulp-notify + browser-sync で開発効率アップを図る - Gulp で作る Web フロントエンド開発環境 #2

前回の記事では Gulp を使って SCSS (Sass) をコンパイルしたり Bourbon フレームワークを使えるようにするタスクを作成しました。今回はそれを元に以下のパッケージを導入して開発効率のアップを図りたいと思います。

サンプルコードはこちらからどうぞ。

gulp.watch でファイルの更新を監視してタスクを実行

SCSS ファイルを編集して保存したタイミングでコンパイルタスクを実行するようにします。といっても Grunt と違って Gulp にはgulp.watch()という標準で監視機能を持っているので、すぐに試すことが出来ます。

gulpfile.jsに以下のコードを追記します。watchというタスクを追加し、その中で gulp.watch()を呼び出します。gulp.watch(glob[, opts, cb])という構造になっており、glob には監視対象となるファイルを指定します。配列形式で複数指定することが出来ます。opts に監視対象が更新されたタイミングで実行したいタスクを指定します。こちらも配列形式で複数指定することが出来ます。実行してみます。タスクが終了せずに Gulp が監視状態に入っています。この状態で ./src/css/modules/_card.scssを編集してみましょう。タスクが自動で実行されました。これでファイル更新の度に手動で Gulp を実行する手間が省けます。監視状態を終了するには control + cを押します。

gulp-watch でファイルの追加も監視対象に含める

残念ながら今紹介した gulp.watch() は、新規で追加されたファイルをそのまま監視することが出来ません。つまり新規でファイルを追加したら、監視を再起動する必要があるというわけです。そこでファイルの新規追加も監視できるように gulp-watchを使います。

パッケージをインストールします。監視タスクを定義しなおします。これで実行してみます。試しに SCSS ファイルを新規に追加してみます。新規ファイルを追加して更に編集しても監視は正常に行われ、タスクが実行されているのが分かります。これでファイル監視がより強力になりましたが、監視中に何らかのコンパイルエラーが発生するとその時点で監視が終了してしまいます。ちょっとしたタイポやファイルの保存の順序などで発生する一時的なエラーのせいでいちいち監視を終了されては面倒です。

gulp-plumber で監視中のエラーによる強制停止を阻止する

パッケージをインストールします。sass タスクを修正します。タスクを実行してみます。SCSS ファイルを壊して意図的にエラーを出してみます。特に変わったこともなく、監視は継続されているようです。SCSSファイルを修正すると、何事もなかったかのように更新を検知してタスクが実行されます。監視の強制終了が阻止されたのは良いことですが、エラーメッセージが表示されません。原因はplumber()に渡したオプションの関数内で実行している@emit('end')にあります。公式ページによると plumber()には何のオプションも渡す必要はないのですが、それだと監視の強制終了は阻止できても次の更新が検知出来ずにいます。この辺りに関する Issue が挙がっていますが、まだクローズされていませんね・・・。

これについては、次で紹介する gulp-notify を導入することで(ひとまず)解決します。

gulp-notify でデスクトップ通知を表示する

Gulp 上で発生したエラーをデスクトップ通知することが出来ます。

パッケージをインストールします。sass タスクを修正します。タスクを実行し、SCSS ファイルを壊して意図的にエラーを出してみます。 gulp-notify デスクトップに通知が表示されました。先ほどの plumber の件といい、この辺りの理解がまだ不足しています。

browser-sync で複数のブラウザ間での操作を同期する

その名の通り複数のデバイス・ブラウザ間でのスクロールやクリックといったマウス操作からページ遷移などを同期してくれるパッケージです。しかもローカルサーバーの立ち上げやライブリロード機能も備えているという優れものです。

パッケージをインストールします。タスクを定義します。

server

続きを読む gulp-watch + gulp-notify + browser-sync で開発効率アップを図る – Gulp で作る Web フロントエンド開発環境 #2