gulpでsassとbrowser-syncを動かす

これまで、gulpはsassをcssにコンパイルするためだけにしか使っていませんでしたが、なんでbrowser-sync使わないの？って言われたので設定してみました。
browser-sync、設定しようとしてうまくいかなかったんですよね。今回もCannot連発でかなり苦戦し、ファイアウォールの設定を疑ったりもしましたが、単に設定がまずかっただけでした。

構成はこんな感じ、 developディレクトリ内のファイルを監視します。

gulpfileの中身はこんな感じ。監視対象に変化（保存）があった場合、
sassファイル保存時にsassタスクが実行される。

browser-syncがインストールされていない場合はインストールする。

npm install browser-sync gulp --save-dev

htmlファイルとcssファイルに保存（変化）があった際にbrowser-reloadタスクが実施される。
といった解釈でいいのかな？

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync'); 

// sassコンパイル
gulp.task('sass', (done) => {
    gulp.src('develop/sass/**/*.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .on("error", sass.logError)
        .pipe(gulp.dest('develop/css'));
    done();
});

// リロードするhtml
gulp.task('browser-sync', (done) => {
    browserSync.init({
        server : {
            baseDir : './',
            routes: { "/develop": "./" }, // 追加
        },
        startPath: "/develop",
        notify: false, 
    });
    done();
});

// リロード設定
gulp.task('browser-reload', (done) => {
    browserSync.reload();
    done();
});

// 監視ファイル
gulp.task('watch-files', (done) =>  {
    gulp.watch("develop/*.html", gulp.task('browser-reload'));
    gulp.watch("develop/css", gulp.task('browser-reload'));
    gulp.watch("develop/sass/**/*.scss", gulp.task('sass'));
    done();
});

// タスク実行
gulp.task('default', gulp.series( gulp.parallel('watch-files', 'browser-sync', 'sass'), (done) => {
    done();
}));

手動で更新は圧倒的に手間なわけではないですが、保存するたびにリロードしてくれるのは便利ですね。ちょっとした手間を省いてくれます。