gulpのwatch機能を使って、監視ファイルに変更があった時にタスクを実行する
以前gulpのインストールと、Sassをコンパイルするための最低限の設定を行いました。
今回はそれに引き続き、ファイルを監視して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を押せば終了できます。
