Webサイトコーディングのあれこれ: gulpのメッセージ表示とエラー時監視を止めない（Windows）

今回はメッセージ表示とエラー時監視を止めないです。
下記サイトを参考にさせていただきました。

gulp.jsで便利なタスクを作ってみよう【エラーと通知編】

【1】前回作成したsampleフォルダ内のgulpfile.jsを開きます。

下記を追記し

var notify = require('gulp-notify');
var plumber = require('gulp-plumber');

タスクを下記に修正します。

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(sass().on("error", sass.logError))
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'Sassをコンパイルしました。',
            message:new Date()
       }));
});

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'HMTLをコンパイルしました。',
            message:new Date()
       }));
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
        .pipe(notify({
            title:'JSをコンパイルしました。',
            message:new Date()
       }));
});

（追記＆修正後）
var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var browserSync = require("browser-sync");
var imagemin = require('gulp-imagemin');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');

gulp.task("sass", function() {
    gulp.src("gulp/sass/**/*scss")
       .pipe(plumber({
           errorHandler: notify.onError("Error: <%= error.message %>")
       }))
       .pipe(sass().on("error", sass.logError))
       .pipe(sass({outputStyle: 'expanded'}))
       .pipe(autoprefixer())
        .pipe(gulp.dest("./html/css"))
       .pipe(browserSync.stream())
       .pipe(notify({
           title:'Sassをコンパイルしました。',
           message:new Date()
       }));
});

//html
gulp.task("html", function () {
    gulp.src("gulp/**/*.html")
        .pipe(gulp.dest("html/"))
        .pipe(browserSync.stream())
       .pipe(notify({
           title:'HMTLをコンパイルしました。',
           message:new Date()
       }));
});

//js
gulp.task("js", function () {
    gulp.src("gulp/js/**/*.js")
        .pipe(gulp.dest("html/js/"))
        .pipe(browserSync.stream())
       .pipe(notify({
           title:'JSをコンパイルしました。',
           message:new Date()
       }));
});

//img
gulp.task('jpg', function() {
   gulp.src('gulp/**/*.jpg')
       .pipe(imagemin())
       .pipe(gulp.dest('html/'))
       .pipe(browserSync.stream());
});

gulp.task('png', function() {
   gulp.src('gulp/**/*.png')
       .pipe(imagemin())
       .pipe(gulp.dest('html/'))
       .pipe(browserSync.stream());
});

gulp.task('default', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });
    gulp.watch(['gulp/sass/**/*.scss'],["sass"]);
   gulp.watch(['gulp/**/*.html'],["html"]);
   gulp.watch(['gulp/**/*.js'],["js"]);
   gulp.watch(['gulp/**/*.jpg'],["jpg"]);
   gulp.watch(['gulp/**/*.png'],["png"]);
});

※追記したら保存を忘れないようにｗ

【2】通知プラグインをインストール

コマンドプロントでsampleディレクトリまで移動します。

※コマンドプロントにcdと半角スペースを記述してsampleフォルダをドラッグ＆ドロップでエンター

（コマンドプロンプト表示例）
C:\Users\（ユーザ名）\Desktop\sample>

続いて下記コマンドを入力します。

※もしgulpが実行中なら終了させてから入力してください。

（入力コマンド）
npm i gulp-notify --save-dev

【3】エラー時監視を止めないプラグインをインストール

続けて下記コマンドを入力しましょう。

（入力コマンド）
npm i gulp-plumber --save-dev

【4】動作確認

（入力コマンド）
gulp

作業フォルダ内(gulpフォルダ)のhtmlとscssを修正し、保存後、
デスクトップの右上にメッセージが表示されればOK

続いてscssファイルに適当に文字列をいれて、エラーを出してみましょう。

例えば下記みたいにいれてみてください。

p {
    background:#f00;
}

aaaaaaaaaaa

するとデスクトップの右上にエラーが表示され
コマンドプロントにもエラーが表示されましたでしょうか？

文字列のaaaaaaaaaaaを削除し、再度保存してみましょう。

右上にコンパイルメッセージが表示されればOK。

これでgulpで下記の事ができるようになりました。