gulpのwatchメソッドでsassを自動コンパイル

2021.03.22

gulpのwatchメソッドでscssファイルを常時監視し、scssファイルが更新されたタイミングでsassをコンパイルします。

gulpfile.jsにwatchFiles関数を追加して処理を記述します。watchメソッドの第一引数に監視対象のscssファイルのパスを指定します。scssファイル更新時にsassをコンパイルするstyles関数を実行します。

//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');

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

function watchFiles() {
  //scssファイル更新時にsassのコンパイルを実行
  gulp.watch('./src/scss/**/*.scss').on('change', styles);
}

//gulp起動時、sassのコンパイル・scssファイルの監視を順番に実行
gulp.task('default', gulp.series(styles, watchFiles));

コマンドラインでCtrl+Cを押すとscssファイルの監視が終了できます。