gulp導入しました。
引き続きgulpです。

gulpfile.js設定

gulp4だと3系の記事を参照していたらエラー吐きまくったので、バージョンは気をつけましょう。

追加したモジュール

gulp-sass
gulp-plumber
gulp-notify

それぞれインストールしてください。

sassコンパイル用

npm install gulp-sass --save-dev

エラー時に監視を止めない

npm install gulp-plumber --save-dev

エラーコードのポップアップ表示

npm install gulp-notify --save-dev

それらを反映した設定ファイル

gulpfile.js

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

//sassコンパイル
gulp.task("sass",function(done){
	gulp.src("sass/*.scss")
	.pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
	.pipe(sass({outputStyle: 'expanded'}))
	.pipe(gulp.dest("./css"));
	done();
});

//動作設定
gulp.task("default", gulp.series('sass', function(done){
	gulp.watch("sass/*.scss", gulp.series('sass'));
	done();
}));

これを使用するプロジェクトフォルダに配置。
該当のフォルダにcdで移動後、gulpで開始します。

$ gulp

終了するときは「ctrl + c」です。

さらにbrowser-sync加える

ファイルを更新すると同時にブラウザも更新してくれます。
複数のブラウザを開いている状態で、ページ遷移、スクロールなどを同期してくれます。

npm install browser-sync --save-dev

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var browserSync =require('browser-sync');

//sass
gulp.task("sass",function(done){
	gulp.src("sass/*.scss")
	.pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
	.pipe(sass({outputStyle: 'expanded'}))
	.pipe(gulp.dest("./css"));
	done();
});


//ブラウザ同期
gulp.task('browser-sync', function(done) {
	browserSync({
		proxy: "http://hogehoge" //MAMPなどで設定したバーチャルホスト
	});
	done();
});

//ブラウザリロード
gulp.task('bs-reload', function (done) {
	browserSync.reload();
	done();
});


//動作設定
gulp.task('default', gulp.series('browser-sync', function (done) {
	gulp.watch("sass/*.scss", gulp.series('sass'));

	gulp.watch("./*.html",		gulp.series('bs-reload'));
	gulp.watch("./**/*.html",	gulp.series('bs-reload'));
	gulp.watch("./css/*.css",	gulp.series('bs-reload'));
	gulp.watch("./js/*.js",		gulp.series('bs-reload'));
	done();
}));

MAMPで設定しなくてもbrowser-syncでローカル環境は作ってくれますが、PHP環境などは対応していないので、やはり動的サイトではMAMPを入れたほうが良さそうです。

MAMPについてはこちら
MAMPのインストール＆初期設定＋αをしてみる

完全な静的サイトだったら、browser-syncの部分を下記に書き換えるとMAMPなしでローカル環境を作ってくれます。

gulpfile.js

//ブラウザ同期
gulp.task('browser-sync', function(done) {
    browserSync({
        server: {
            baseDir: "/",
            index: "index.html"
        }
    });
    done();
});

公式サイトのオプション一覧

Browsersync options