2020/12/27 （最終更新日：2022/02/12）

【gulp.watch】Sassの更新を監視して自動でタスクを実行（コンパイル）する方法

Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ

※本サイトはアフィリエイト広告を利用しています。

【Sassを自動的にコンパイルする方法を知りたい人】

「gulpのwatchを使って、Sassを自動でコンパイルする方法が知りたいなぁ。」

こういった疑問に答えます。

本記事の内容

gulp.watchでSassを自動でコンパイルする方法
エラー時にgulp.watchを停止させない方法
gulp.watchのエラーに気付くように通知を出す方法

gulpには、タスクを監視する
『watch』という機能があり、
それを使えばSassを更新する度に
自動的にコンパイルしてくれるようになります。

今回は、過去にWeb制作会社にも
勤務していた経験のあるこの僕が
その設定方法について解説します。

また今回の内容は、
gulpなどのインストールは
済んでいることが前提なので、
これらの準備がまだの方は
下記の記事を参考にしてください。

≫【mac版】gulpのインストールから使い方までを解説【Web制作初心者向け】

gulp.watchでSassを自動でコンパイルする方法

先ほど紹介した記事の通りに
gulpをインストールすると、
『gulpfile.js』内の記述は
下記のようになっていると思います。

【gulpfile.js】

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('./css'));
});

この状態から
タスクを追加していきます。

下記のように、
タスク『watch』を追記してください。

【gulpfile.js】

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('./css'));
});

//watchタスクを追記
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

こちらのコードの見方ですが、
タスク『watch』を定義していて、
そのwatchメソッドの
第一引数で監視するフォルダのパス、
第二引数で実行するタスク
を指定しています。
（※フォルダのパスは
必要に応じて変更してください。）

では、いま定義した
『watch』タスクを実行してみましょう。

下記のコマンドを実行すると
ファイルの監視（watch）が始まります。

gulp watch

これで常に
指定したパスのファイルを
監視している状態となり、
更新をするたびに
自動でコンパイルしてくれます。

ファイルの監視（watch）を止めたい場合は？

ちなみに、
監視を止めたい場合には
『control + c』
のコマンドを入力すれば
中止することが出来ます。

エラー時にgulp.watchを停止させない方法

ここまでで、
ファイルを保存するだけで
自動的にコンパイルしてくれるようになりました。

ただ、設定的にはまだ不十分でして、
なぜかというと、エラーになるとwatch機能が止まってしまうから。

エラーが出るたびに、

エラー箇所の修正

　　　　↓

タスク実行のコマンドを入力

上記の作業が発生するとなると、、普通に面倒ですよね。

なので、
エラーが出ても監視を停止しない
ように設定をしていきましょう。

まず、gulpのプラグインである
「gulp-plumber」パッケージをインストールします。

下記のコマンドを実行してください。

npm i -D gulp-plumber

インストールしたら、
gulpfile.jsに記述を追加します。

const gulp = require('gulp');
const sass = require('gulp-sass');

//gulp-plumberを読み込み
const plumber = require('gulp-plumber');


gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		.pipe(plumber())  //「gulp.src」の直下に追記
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

追記後は、上記のようになります。

これでエラーが出ても
watchタスクが止まらなくなり、
エラーが出る度にコマンドを入力する手間が無くなりました。

gulp.watchのエラーに気付くように通知を出す方法

ここまでで、
Sassファイルを更新するたびに
自動でコンパイルをし、
コンパイルエラーが出ても
監視を停止しないように設定しました。

しかしこのままでは
エラー自体に気が付かない
という可能性がありますので、
エラー時には分かりやすく
通知を出すように設定します。

ではまず、
「gulp-notify」というパッケージを
インストールしていきます。

npm i -D gulp-notify

インストールが出来たら例のごとく、
gulpfile.jsにコードを追記していきます。

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
//「gulp-notify」を読み込み
const notify = require('gulp-notify');

gulp.task('sass', function() {
	return gulp.src('./sass/**/*.scss')
		//plumberの引数に追記
		.pipe(plumber({errorHandler: notify.onError(
			"Error: <%= error.message %>"
		)}))
		.pipe(sass({outputStyle: 'expanded'}))
		.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
	gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

今回は今までとは少し違い、
notifyをplumberの引数に追記します。

これでエラーが出た際に、
通知がくるようになります。