WebDesigner's Memorandumウェブデザイナーの備忘録

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

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');

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

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

}));

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね