CREATOR BLOG

gulp入門その2―ファイルの監視をしてみる

2015/01/21
atsuko.a
  • このエントリーをはてなブックマークに追加

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
前回に引き続き、gulpについてつらつら書いていきます。
前回の記事はこちらgulp入門その1―とりあえず動かすところまで

同期処理やらについても書きたかったのですが、書き始めてみたらやたら長くなってしまったので分割。
今回は、ファイルの監視(+エラー時の通知)をしてみます。

もくじ

  • デフォルトで実行されるタスクを設定する
  • ファイルの監視をする
    • タスクの監視中にエラーが起きた場合
    • エラーによる監視の強制停止を回避する
    • エラーメッセージを表示する
  • まとめ

デフォルトで実行されるタスクを設定する

何はともあれgulpを起動したら一番最初に実行したいタスクを設定します。

foo/barの部分には既に設定しているタスクの名前を入れることができます。
たとえば、

と、書いておき、黒い画面から

とgulpを起動すると、処理A・Bその後処理Cが実行される、という寸法になっています。
個人的には処理Cもタスク名を付けて外に出してあげたほうがいいと思いますが(´・ω・`)

ファイルの監視をする

特定のファイルが変更された際に自動的にタスクを実行したい…そんなとき、ありますよね?
gulpのwatchメソッドを使います。

簡単!

タスクの監視中にエラーが起きた場合

.watchを使うとファイルの監視が出来ますが、タスクを実行した際にエラーがあると監視が止まってしまいます。
例えば「.scssファイルを監視して変更があった際にコンパイルするタスク」を設定していた場合、
コンパイルエラーが起こるとタスクのエラーとみなされ監視が止まります
これ結構面倒ですよね。

エラーによる監視の強制停止を回避する

gulp-plumberを使います。
まずはプラグインのインストール

そして、既存のタスクに追記

これでOK!簡単ですね。

エラーメッセージを表示する

単に強制停止を回避しただけだと、エラーが起きていることに気付けないのでメッセージを出しましょう。
(コマンドライン上にはエラー表示はされています)

gulp-notifyを使います。
こちらもまずはプラグインのインストール

エラーでの使い方はこんな感じ。

他にもいろんな通知を出せるみたいですが、一旦はこれで。

そしてタスクに追記

これでOK。
監視中のファイルにエラーが出ると「ぴょろっ」という音とともに下のような通知がデスクトップに現れます。
0121_2
通知はクリックすると消えます。

gulp-notifyは通知を出すだけのプラグインなので、エラーが起きた時に何かするというエラーハンドリングはgulp-plumber側でやっています。

の部分ですね。

まとめ

デフォルトのタスク設定と、ファイルの監視・エラー通知ができるようになりました。
デスクトップに通知が来ると一段と便利さが増しますね。

次こそは同期処理について書きます、多分……:(;゙゚'ω゚'):
それでは今日はこのへんで!

この記事を書いた人

atsuko.aフロントエンドエンジニア

猫派の甘党、胃が弱い系WEB屋。 コーディングしたり、たまにデザインしたりします。

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive