GULPでSASSやHTMLの変更を検知してブラウザを自動でリロードさせる方法

2021年7月22日GULP

GULPでSASSやHTMLの変更を検知してブラウザを自動でリロードさせる方法を紹介します。

GULPでSASSの変更を検知する

gulpのwatchを使います。

gulpfile.jsが以下の状態とします。

const gulp = require("gulp");
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require("gulp-sourcemaps");
// SASS compile
gulp.task("sass", function() {
  return gulp
  .src(["./src/sass/**/*.scss", '!./src/sass/not-compile.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("./dist/css"));
});

その場合、下のように記述します。

// watch changes
gulp.task('watch', function() {
  gulp.watch('./src/sass/**/*.scss', gulp.series(['sass']));
});

これで、第一引数に指定したファイルに変更があれば、第二引数に指定したtaskが実行されます。

ブラウザを自動でリロードさせる

ブラウザを同期させるためには、browser-syncを使います。
まずはインストールします。

npm install browser-sync --save-dev
or
yarn add browser-sync --dev

そして、以下のように追記します。

const browserSync = require('browser-sync').create();

// browser-sync
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: './' //index.htmlをrootにおいている場合。
    },
    browser: 'google chrome'
    // firefox developer edition
  })
})

SASSの変更を検知してブラウザを自動でリロードさせる方法

基本的には上2つの処理を合わせます。
そして、borowser-syncのreloadを使います。

// watch changes and browser-sync
gulp.task('watch', function() {
  // browser-sync
  browserSync.init({
    server: {
      baseDir: './' //index.htmlをrootにおいている場合。
    },
    browser: 'google chrome'
    // firefox developer edition
  })
  // watch changes
  gulp.watch('./src/sass/**/*.scss', gulp.series(['sass']))
  .on('change', browserSync.reload);
});

watchの中に、browser-syncの処理も記述します。
そして、sassの変更検知のあと、changeメソッドを使って、変更があれば、browser-syncのreloadが実行されるように設定します。
これでsassファイルに変更があれば、自動的にsassがコンパイルされ、ブラウザがリロードされるようになります。

HTMLとSASSの変更を検知してブラウザを自動でリロードさせる方法

上にhtmlを加えます。

const gulp = require("gulp");
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require("gulp-sourcemaps");
const browserSync = require('browser-sync').create();

// SASS compile
gulp.task("sass", function() {
  return gulp
  .src(["./src/sass/**/*.scss", '!./src/sass/not-compile.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("./dist/css"));
});

// Watch changes and browser-sync
gulp.task('watch', function() {
  // browser-sync
  browserSync.init({
    server: {
      baseDir: './' //index.htmlをrootにおいている場合。
    },
    browser: 'google chrome'
    // firefox developer edition
  })
  // watch changes
  gulp.watch(['./src/sass/**/*.scss', '**/*.html'], gulp.series(['sass']))
  .on('change', browserSync.reload);
});

baseDirでindex.htmlの場所を指定します。
watchするファイルに、htmlを追記します。
上のケースはプロジェクトフォルダ直下にhtmlファイルをおいています。
後は同じです。

これで、sassが変更されても、htmlが変更されても検知して自動リロードするようになります。