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

URL: https://webrandum.net/gulp-notify/
公開日: 2019-04-07
更新日: 2019-04-07
カテゴリー: コーディング
タグ: gulp
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

この2つを使うことで下の画像のようなエラー通知を表示できます。

![gulpでデスクトップ通知](https://webrandum.net/mskz/wp-content/uploads/2019/04/image_1-5.png)

## 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行追加するだけで通知処理が追加できました。

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