gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する

2019年3月30日

以前gulpのインストールと、Sassをコンパイルするための最低限の設定を行いました。
今回はそれに引き続き、ファイルを監視してSassが更新されたら自動でコンパイルするタスクを作成してみます。

今回は様々な作業を自動化するビルドシステム「gulp(ガルプ)」の基礎と導入方法について書いていきます。必要な前知識gulpはNode.jsをベースにしたビルドシステムヘルパー（様々な作業を自動化してくれるツール）です。「様々な作業って具体的に何してくれるの？」という事ですが、以下のような面倒な事をコマンド1つで出来るようになります。 Sassのコンパイルファイルの圧縮ベンダープリフィックスの自働付与画像の圧縮必要な知識や、インストールしておくべきものは以下の通りですが、一応初心者の方でも勉強しながら進めて...

やりたいこと

今回やりたい事としては下記の通り。

.scssファイルが更新された時に、sassタスクを実行する
- タスク名はwatchとする
デフォルトタスクにwatchタスクを登録する

デフォルトタスクにそのままファイルを監視する処理を書いてもいいのですが、今回はファイル監視を目的とするwatchタスクを作成して、それをデフォルトタスクでも読み込むようにしてみます。

タスクの作成

watchタスクの作成

昔はgulp-watchというプラグインを別途インストールして読み込む必要があったのですが、今はgulpに入っているため、インストールの必要はありません。

使い方は下記の通り。

gulp.watch('監視するファイル', 処理)

実際にタスクを組み込む際は下記のようになります（少し冗長ですが）。

//プラグインの読み込み
const gulp = require('gulp');
const sass = require('gulp-sass');

//タスクの設定（定義）
//タスク１ - Sassのコンパイル
gulp.task('sass', () => {
return gulp.src('assets/scss/style.scss')
.pipe(sass({
outputStyle: 'compact' //通常の見た目にしたい場合はexpanded
}))
.pipe(gulp.dest('./'));
});
//タスク２ - ファイルを監視する（ファイルに変更があれば、タスク１を行う）
gulp.task('watch', () => {
gulp.watch('assets/scss/**/*.scss', gulp.series(['sass']));
});

//デフォルトタスクに、タスク２を設定
gulp.task('default', gulp.series(['watch'], () => {

}));

これでgulpを動かすと、監視ファイルに変更があった際に、自動でタスクが実行されます。

終了したい時はターミナルでcontrol + Cを押せば終了できます。