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


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

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

## gulp-notifyの場合

####[gulp-notify](https://www.npmjs.com/package/gulp-notify)をinstall

```
npm install --save-dev gulp-notify
```

####gulpfile.jsにtaskを書く

```js: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:scss
main {
  display: block;

// 閉じタグなし
```

####通知が出た！
![01.png](https://qiita-image-store.s3.amazonaws.com/0/139029/d183cdb2-c77c-b183-a057-9f860d2165b2.png "01.png")


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

#####ターミナルにもエラーメッセージが出る
![02.png](https://qiita-image-store.s3.amazonaws.com/0/139029/1a1c5e35-138b-daae-9e41-15b6fd606dbb.png "02.png")


## node-notifierの場合

####[node-notifier](https://www.npmjs.com/package/node-notifier)をinstall
```
npm install --save-dev node-notifier
```

####gulpfile.jsにtaskを書く

```js: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:scss
main {
  display: block;

// 閉じタグなし
```

####通知が出た！
![03.png](https://qiita-image-store.s3.amazonaws.com/0/139029/1d36f4b5-314d-d70a-6cf7-c9e75a06f53f.png "03.png")


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

#####ターミナルにエラーメッセージが出なくなる
![04.png](https://qiita-image-store.s3.amazonaws.com/0/139029/fe1bde1f-a2dc-9d09-8efb-39b7c7553e87.png "04.png")

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

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

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

![06.png](https://qiita-image-store.s3.amazonaws.com/0/139029/38f857fc-0df9-c03a-8fd4-1c0117d3b986.png "06.png")


####カスタマイズも出来る！

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

```js: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:scss
main {
  display: block;

// 閉じタグなし
```

####通知が出た！
![05.png](https://qiita-image-store.s3.amazonaws.com/0/139029/328d787a-d659-bb6d-16bb-c009babb3794.png "05.png")

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

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

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

おわり！