gulp.watchでタスクを実行してみる

Gulp.jsのwatchを使ってファイルを監視して、変更があった場合にタスクを実行してみます。

準備

cd 作業ディレクトリ名

で作業ディレクトリへ移動し、Gulp.jsとgulp-sassをインストールします。
インストールは前に下記記事で記述したので省略します。
Gulp.jsの導入～Sassのコンパイルまで試してみた | cly7796.net

作業ディレクトリ内にsassとcssディレクトリを作成し、sassディレクトリ内に空のstyle.scssファイルを作成しておきます。
　

gulpfile.jsの作成

gulpfile.jsファイルを作成し、以下のように記述します。

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

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(sass())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'));
});

// watch処理
gulp.task('watch', function () {
	// scssファイルの変更があったらSass処理を実行
	gulp.watch('sass/**/*.scss', ['sass']);
});

Sassの処理は以前の記事とほぼ同じです。

watchの処理を追加して、sassディレクトリ内のscssファイルを監視し、変更があった場合はSassのコンパイル処理を行うようにしています。
このとき、watchの対象パス名が「./」から始まっていると新規に追加したファイルを処理しないみたいです。
　

watchの実行

gulp watch

でwatchの処理を実行します。
style.scssが監視されているはずなので、以下のように書き換えて保存してみます。

CSS

#section {
	width: 960px;
	margin: 0 auto;
	h1 {
		font-size: 20px;
	}
}

cssディレクトリ内にstyle.cssファイルが作成されたら成功です。

CSS

#section {
  width: 960px;
  margin: 0 auto; }
  #section h1 {
    font-size: 20px; }

ちなみにwatchを停止したい場合は Ctrl + c で停止できます。
　

gulp-plumberのインストール

Sassのコンパイルエラーがあるとwatchが止まってしまうので、gulp-plumberというプラグインをインストールします。
Ctrl + c でwatchを一旦止めて、以下を入力します。

npm install gulp-plumber --save-dev

インストールが完了したら、gulpfile.jsファイルを以下のように変更します。

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

// Sass処理
gulp.task('sass', function () {
	// Sassファイルのディレクトリ
	gulp.src('./sass/**/*.scss')
	.pipe(plumber())
	.pipe(sass())
	//コンパイル後のCSSファイル出力先
	.pipe(gulp.dest('./css'));
});

// watch処理
gulp.task('watch', function () {
	// scssファイルの変更があったらSass処理を実行
	gulp.watch('sass/**/*.scss', ['sass']);
});

watchの処理を再実行します。

gulp watch

これで、Sassなどでエラーが出てもwatchが止まらなくなりました。
　

【参考サイト】

• これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する | Webデザイン、フロントエンド系の技術に関する備忘録 – whiskers
• gulpでsassをコンパイルするタスクを作る – yutaponのブログ
• gulp.watchはパスを./で始めると新規ファイルを処理しない – Qiita