gulp-plumberとgulp-notifyでgulpエラー時にデスクトップで通知がくるようにする

2019年4月7日

gulpで監視状態にして何か記述ミスをした時、ターミナルを見ないとgulpでエラーが発生している事に気が付きません。

そこで今回はgulp-plumberとgulp-notifyというプラグインを利用して、エラー時にデスクトップ通知が来るようにしてみます。

ちなみに、gulp-plumberはエラー時にタスクが強制終了してしまうのを防止するプラグインで、gulp-notifyがデスクトップに通知を表示してくれるプラグインです。
この2つを使うことで下の画像のようなエラー通知を表示できます。

gulp-plumberとgulp-notifyのインストール

今回はSassのコンパイルを目的にタスクを作成してみます。
まずはいつも通り、gulpとgulp-sassに加えてgulp-plumberとgulp-notifyをインストールします。

npm install -D gulp
npm install -D gulp-sass
npm install -D gulp-plumber
npm install -D gulp-notify

gulp-notifyの使い方

gulp-plumberは呼び出すだけでOKです。

const plumber = require('gulp-plumber');
plumber();

gulp-notifyは呼び出した後に.onError('エラーメッセージ')の形で、通知できます。
エラーメッセージ内で<% = error.message %>と入力しておくと、エラー内容の表示も可能です。ただ、タスクが停止してしまうと意味がないので、基本的にplumberの括弧内に記述します。

gulpfile.jsconst plumber = require('gulp-plumber');
const notify = require('gulp-notify');
plumber(notify.onError('Error: <%= error.message %>'))

実際にSassのコンパイルタスクに組み込むと書きのようになります。

//プラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');
const notify = require('gulp-notify');

//タスクの設定（定義）
//タスク１ - Sassのコンパイル
gulp.task('sass', () => {
return gulp.src('assets/scss/style.scss')
.pipe(plumber(notify.onError('Error: <%= error.message %>')))
.pipe(sass({
outputStyle: 'compact' //通常の見た目にしたい場合はexpanded
}))
.pipe(gulp.dest('./'));
});
//タスク２ - ファイルを監視する（ファイルに変更があれば、タスク１を行う）
gulp.task('watch', () => {
gulp.watch('assets/scss/**/*.scss', gulp.series(['sass']));
});

//デフォルトタスクに、タスク２を設定
gulp.task('default', gulp.series(['watch'], () => {

}));

プラグインの読み込みを除けば、1行追加するだけで通知処理が追加できました。

ターミナルだけだと、エラーが発生したことに気が付かず、作業がストップしてしまう事があるので、デスクトップ通知はかなり助かります。