今回はメッセージ表示とエラー時監視を止めないです。
下記サイトを参考にさせていただきました。
【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で下記の事ができるようになりました。
- SassからCSSへの自動変換
- 書き出したCSSの見た目調整
- ベンダープレフィックス自動付与
- ブラウザ同期
- 画像圧縮
- メッセージ表示
- エラー時監視を止めない
まだまだ便利なプラグインがあるのですがとりまこれでgulpを使ったコーディング環境が整いました。
次回は「
Sassの便利な記法をまとめて忘備録にしよう」です(/・ω・)/
ブログ王ランキングに参加中！
