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でレスポンスを返してみましたが、
該当の行数までは出してくれませんでした。
ただ、エラー時以外にも通知を出せるので、
用途に合わせて使えそうですね。
おわり！