gulpにbrowser-syncを組み込んで、gulp起動時にブラウザが立ち上がるようにします。以下のコマンドでbrowser-syncをインストールします。
npm install browser-sync
gulpfile.jsの記述です。gulp起動時に実行されるdefaultのタスクからbrowsersync関数を呼び出し、browserSync.initを実行します。browserSync.initはgulp起動時のみ実行します。
//gulpfile.js
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
function browsersync(done) {
browserSync.init({
proxy: 'http://localhost/htdocs/',
port: 3000,
reloadOnRestart: true,
});
done();
}
//gulp起動時、browserSync.initを実行
gulp.task('default', gulp.series(browsersync));
browserSync.initで設定したproxyのアドレスは、XAMPPのバーチャルホストで設定したドキュメントルートの直下に作成したディレクトリを指定します。
XAMPPのバーチャルホストは以下のファイルで設定します。
C:\xampp\apache\conf\extra\httpd-vhosts.conf
gulpを起動してbrowser-syncが正常に動作すると、指定したアドレスでブラウザが立ち上がりサイトが表示されます。コンソールにはアクセスしたURLが表示されます。Externalのアドレスは同じネットワーク内であれば他の端末からアクセス可能です。UIのアドレスはbrowser-syncの管理画面です。

ただしこのままではbrowser-syncが動作するのはgulp起動時の一度だけです。サイト内のhtmlファイル更新時とscssファイルを更新してsassがコンパイルされた後にbrowser-syncが実行されるようにgulpfile.jsを変更します。
//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();
function styles() {
return gulp
.src('./src/scss/**/*.scss')
.pipe(
sass({
outputStyle: 'expanded'
})
)
.pipe(
gulp
.dest('../assets/css')
)
.pipe(
//sassコンパイル時はリロードせずブラウザに反映
browserSync.reload(
{stream:true}
)
);
}
function browsersync(done) {
browserSync.init({
proxy: 'http://localhost/htdocs/',
port: 3000,
reloadOnRestart: true,
});
done();
}
function watchFiles(done) {
const browserReload = () => {
browserSync.reload();
done();
};
//scssファイル更新時にsassのコンパイルを実行
gulp.watch('./src/scss/**/*.scss').on('change', styles);
//htmlファイル更新時にbrowserSync.reloadを実行
gulp.watch('../**/*.html').on('change', browserReload);
}
//gulp起動時、sassのコンパイル・browserSync.init・ファイル監視を順番に実行
gulp.task('default', gulp.series(styles, browsersync, watchFiles));
ファイル監視中にhtmlファイルが更新された時はbrowserSync.reloadを実行します。sassコンパイル時はリロードせずブラウザに反映させるため、browserSync.reloadをstream:trueで実行します。





