SCSSコンパイルのエラー時にデスクトップ通知を出す方法

19017 ワード
gulp-notify node-notifier scss gulp scss テキストリンク

gulpでSCSSコンパイルする時、
エラーが起きて処理が出来てないことに気が付かない事が多かったので、
デスクトップ通知されるようにしてみました。

「gulp-notify」「node-notifier」2つのpackegeを使ってみたので、
どちらもまとめておきます。

gulp-notifyの場合

gulp-notifyをinstall

npm install --save-dev gulp-notify

gulpfile.jsにtaskを書く

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
// watch中にエラーが起きても停止しないように「gulp-plumber」を使っています
var notify = require("gulp-notify");

var DIR = {
  sass: 'src/scss/**/*.scss',
  css: 'assets/css'
}

/**
 * compile sass
 */
gulp.task('sass',function(){
return gulp.src(DIR.sass)
    .pipe(plumber({
      errorHandler: notify.onError({
        title: "失敗してるよ！", // 任意のタイトルを表示させる
        message: "<%= error.message %>" // エラー内容を表示させる
        })
    }))
    .pipe(sass({outputStyle : 'compressed',errLogToConsole: false}))
    .pipe(gulp.dest(DIR.css));
});

gulp.task('watch-sass', function() {
  gulp.watch(DIR.sass , ['sass']);
});

エラーを発生させてみる

scss
main {
  display: block;

// 閉じタグなし

通知が出た！

・デスクトップ通知と一緒に、カエルの音が出ます。ゲロゲロ
・エラーが起きたファイルと、内容が表示されます。
・gulpのかわいいアイコン！

ターミナルにもエラーメッセージが出る

node-notifierの場合

node-notifierをinstall

npm install --save-dev node-notifier

gulpfile.jsにtaskを書く

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notifier = require('node-notifier');

var DIR = {
  sass: 'src/scss/**/*.scss',
  css: 'assets/css'
}

/**
 * compile sass
 */
gulp.task('sass',function(){
return gulp.src(DIR.sass)
    .pipe(plumber(function(error){
        notifier.notify({
          title: '失敗してるよ！', // 任意のタイトルを表示させる
          message: error.message // エラー内容を表示させる
        });
      }
      ))
    .pipe(sass({outputStyle : 'compressed',errLogToConsole: false}))
    .pipe(gulp.dest(DIR.css));
});

gulp.task('watch-sass', function() {
  gulp.watch(DIR.sass , ['sass']);
});

エラーを発生させてみる

scss
main {
  display: block;

// 閉じタグなし

通知が出た！

・エラーが起きたファイルと、内容が表示されます。
・初期値は音なし。（オプションでつける事も出来ます。）
・アイコンはターミナル。

ターミナルにエラーメッセージが出なくなる

通常「node-notifier」を入れていなくてもエラーメッセージが出るはずですが、
ターミナルは変化なし。

エラーがなくても通知出来る

gulpfile.js
/**
 * start watch-sass
 */
notifier.notify('watchを開始します！');

カスタマイズも出来る！

ターミナルのアイコンがかわいくないので、画像を変更してみます。
ついでに、分かりやすいように音も出しました。

gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var notifier = require('node-notifier');
var path = require('path');

var DIR = {
  sass: 'src/scss/**/*.scss',
  css: 'assets/css'
}

/**
 * compile sass
 */
gulp.task('sass',function(){
return gulp.src(DIR.sass)
    .pipe(plumber(function(error){
        notifier.notify({
          title: '失敗してるよ！',
          message: error.message,
          icon: path.join(__dirname, 'error.png'), // 任意の画像を指定する
          sound: true // 音を付ける
        });
      }
      ))
    .pipe(sass({outputStyle : 'compressed',errLogToConsole: false}))
    .pipe(gulp.dest(DIR.css));
});

gulp.task('watch-sass', function() {
  gulp.watch(DIR.sass , ['sass']);
});

エラーを発生させてみる

scss
main {
  display: block;

// 閉じタグなし

通知が出た！

かわいい絵文字のアイコンに変わってますね！
（音もちゃんと出てます。）

まとめ

どちらも導入したらサクッと使えて便利ですが、
「gulp-notify」はデスクトップ通知と同じように、
ターミナルにもエラーメッセージがちゃんと表示してくれるのが良い！

逆に、「node-notifier」はターミナルにエラーメッセージが出なくなるのが難点。
console.logでレスポンスを返してみましたが、
該当の行数までは出してくれませんでした。
ただ、エラー時以外にも通知を出せるので、
用途に合わせて使えそうですね。

おわり！