node-notifierでES6とSCSSをコンパイルした時のエラー内容をデスクトップに通知させる

node-notifierとはWindows/Mac/Linuxのデスクトップに通知を出すライブラリです。これを使うと簡単にデスクトップに通知を発行できます。

node-notifierを使ってES6とSCSSをコンパイルした時のエラー内容をデスクトップに通知させると開発がかなり捗るようになったので以下に手順を記しておきます。
ちなみにコンパイルにはgulpを使用しています。

手順

依存パッケージをインストール

npm install gulp gulp-sass gulp-watch gulp-plumber gulp-notifier gulp-babel node-notifier

※ gulp-plumberを使用するとwatchプロセスでファイルを監視中にエラーが起きてもプロセスが落ちなくなります。

gulpfile.js

プロジェクトのルートディレクトリの直下にscss,css,buildディレクトリがある場合は以下になります。

var gulp = require('gulp');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var notifier = require('node-notifier');
var sass = require('gulp-sass');
var babel = require('gulp-babel');


function onError(msg){
    //エラーが出力されたらデスクトップにメッセージを通知させる。
    var type = msg.name;
    var msg = msg.message;
    notifier.notify({
        'title': type,
        'message': msg
    });
};

gulp.task('sass',function(){
    //scssをコンパイルする。
    gulp.src('./scss/**/*.scss')
               .pipe(sass())
               .on('error',onError)
               .pipe(gulp.dest('./css'));
});

gulp.task('babel',function(){
    //ES6をコンパイルする。
    gulp.src('src/**/*.js')
    .pipe(plumber())
    .pipe(babel())
    .on('error',onError)
    .pipe(gulp.dest('build'));
});

gulp.task('watch', function() {
    //ファイルに変更があればコンパイルする。
    var srcJS = 'src/**/*.js';
    var gulpSCSS = 'scss/**/*.scss';
    gulp.watch(srcJS,['babel']);
    gulp.watch(gulpSCSS,['sass']);
});

Related Contents

Pickup Contents