gulp入門その2―ファイルの監視をしてみる
- 2015/01/21
- atsuko.a
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
前回に引き続き、gulpについてつらつら書いていきます。
前回の記事はこちらgulp入門その1―とりあえず動かすところまで
同期処理やらについても書きたかったのですが、書き始めてみたらやたら長くなってしまったので分割。
今回は、ファイルの監視(+エラー時の通知)をしてみます。
もくじ
- デフォルトで実行されるタスクを設定する
- ファイルの監視をする
- タスクの監視中にエラーが起きた場合
- エラーによる監視の強制停止を回避する
- エラーメッセージを表示する
- まとめ
デフォルトで実行されるタスクを設定する
何はともあれgulpを起動したら一番最初に実行したいタスクを設定します。
1 2 3 |
gulp.task('default', ['foo', 'bar'], function(){ // 実行したい処理 }); |
foo/barの部分には既に設定しているタスクの名前を入れることができます。
たとえば、
1 2 3 4 5 6 7 8 9 10 |
gulp.task('taskA', function(){ // 処理A }); gulp.task('taskB', function(){ // 処理B }); gulp.task('default', ['taskA', 'taskB'], function(){ // 処理C }); |
と、書いておき、黒い画面から
1 |
$ gulp |
とgulpを起動すると、処理A・Bその後処理Cが実行される、という寸法になっています。
個人的には処理Cもタスク名を付けて外に出してあげたほうがいいと思いますが(´・ω・`)
ファイルの監視をする
特定のファイルが変更された際に自動的にタスクを実行したい…そんなとき、ありますよね?
gulpのwatchメソッドを使います。
1 2 3 4 |
gulp.watch(監視対象ファイル', ['変更があったら実行するタスク']); // ex gulp.watch('./pc/sass/*.scss', ['sassCompilePC']); |
簡単!
タスクの監視中にエラーが起きた場合
.watchを使うとファイルの監視が出来ますが、タスクを実行した際にエラーがあると監視が止まってしまいます。
例えば「.scssファイルを監視して変更があった際にコンパイルするタスク」を設定していた場合、
コンパイルエラーが起こるとタスクのエラーとみなされ監視が止まります。
これ結構面倒ですよね。
エラーによる監視の強制停止を回避する
gulp-plumberを使います。
まずはプラグインのインストール
1 |
$ npm install gulp-plumber --save-dev |
そして、既存のタスクに追記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var plumber = require('gulp-plumber'); var rubySass = require('gulp-ruby-sass'); gulp.task('sassCompilePC', function() { // PCのsassのコンパイルするよ gulp.src('./pc/sass/*.scss') .pipe(plumber()) // 監視中のエラーによる強制停止を回避 .pipe(rubySass({ sourcemap: false, sourcemapPath: './pc/sass/', style: 'expanded' })) .pipe(gulp.dest('./pc/style/')); }); gulp.task('whatch', function(){ gulp.watch('./pc/sass/*.scss', ['sassCompilePC']); }); |
これでOK!簡単ですね。
エラーメッセージを表示する
単に強制停止を回避しただけだと、エラーが起きていることに気付けないのでメッセージを出しましょう。
(コマンドライン上にはエラー表示はされています)
gulp-notifyを使います。
こちらもまずはプラグインのインストール
1 |
$ npm install gulp-notify --save-dev |
エラーでの使い方はこんな感じ。
1 2 3 |
var notify = require('gulp-notify'); notify.onError('通知したい文言') |
他にもいろんな通知を出せるみたいですが、一旦はこれで。
そしてタスクに追記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var plumber = require('gulp-plumber'); var rubySass = require('gulp-ruby-sass'); var notify = require('gulp-notify'); gulp.task('sassCompilePC', function() { // PCのsassのコンパイルするよ gulp.src('./pc/sass/*.scss') .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出すよ })) .pipe(rubySass({ sourcemap: false, sourcemapPath: './pc/sass/', style: 'expanded' })) .pipe(gulp.dest('./pc/style/')); }); gulp.task('whatch', function(){ gulp.watch('./pc/sass/*.scss', ['sassCompilePC']); }); |
これでOK。
監視中のファイルにエラーが出ると「ぴょろっ」という音とともに下のような通知がデスクトップに現れます。
通知はクリックすると消えます。
gulp-notifyは通知を出すだけのプラグインなので、エラーが起きた時に何かするというエラーハンドリングはgulp-plumber側でやっています。
1 2 3 |
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) |
の部分ですね。
まとめ
デフォルトのタスク設定と、ファイルの監視・エラー通知ができるようになりました。
デスクトップに通知が来ると一段と便利さが増しますね。
次こそは同期処理について書きます、多分……:(;゙゚'ω゚'):
それでは今日はこのへんで!