WebDesigner's Memorandumウェブデザイナーの備忘録

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

gulpでデスクトップ通知を行う

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

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

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

gulpでデスクトップ通知

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');

//タスクの設定(定義)
//タスク1 - 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('./'));
});
//タスク2 - ファイルを監視する(ファイルに変更があれば、タスク1を行う)
gulp.task('watch', () => {
gulp.watch('assets/scss/**/*.scss', gulp.series(['sass']));
});

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

}));

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね