これまで、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();
}));

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