SCSS 컴파일 오류시 데스크톱 알림을 보내는 방법

gulp에서 SCSS 컴파일 할 때,
오류가 발생하여 처리가 불가능하다는 것을 깨닫지 못하는 경우가 많았기 때문에,
데스크톱 알림을 받으려고했습니다.

"gulp-notify""node-notifier"두 개의 패키지를 사용해 보았으므로,
둘 다 함께 둡니다.

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 설치

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에서 응답을 반환했지만,
해당 행수까지는 내주지 않았습니다.
단, 에러시 이외에도 통지를 낼 수 있으므로,
용도에 맞게 사용할 수 있을 것 같네요.

끝!