gulpfile.jsでbrowser-syncが機能しない

Question

gulpを使ってscssをcssに自動コンパイルするところまでは出来たのですが、browser-syncを使ってブラウザの自動リロードも導入しようと下記のgulpfile.jsを作成したのですが、gulpコマンドを実行したところ、localhostは立ち上がるのですが、index.htmlやscssファイルを編集しても、ブラウザが自動リロードされません。原因は分かる方は教えていただけますと幸いです。

// 組み込むnpmモジュール一覧
const gulp = require('gulp');
const path = require('path');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync');

const Paths = {
  HERE: './',
  DIST: 'dist/',
  CSS: './assets/css/',
  SCSS_TOOLKIT_SOURCES: './assets/scss/now-ui-kit.scss',
  SCSS: './assets/scss/**/**'
};



// 各モジュールの仕事を定義
gulp.task('compile-scss', function() {
  return gulp.src(Paths.SCSS_TOOLKIT_SOURCES)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write(Paths.HERE))
    .pipe(gulp.dest(Paths.CSS));
});

gulp.task('browser-sync', function() {
    browserSync({
        server: {
             baseDir: "../now-ui-kit-hajimemaster/"
            ,index  : "index.html"
        }
    });
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('watch', function() {
  gulp.watch(Paths.SCSS, ['compile-scss']);
});



// gulpコマンドひとつで実行するtaskを指定
gulp.task('default', ['compile-scss']);
gulp.task('default', ['watch']);
gulp.task('default', ['browser-sync']);
gulp.task('default', ['browser-sync'], () => {
    gulp.watch("../now-ui-kit-hajimemaster/*.html",            ['bs-reload']);
    gulp.watch("../now-ui-kit-hajimemaster/assets/css/*.css", ['bs-reload']);
    gulp.watch("../now-ui-kit-hajimemaster/assets/js/*.js",   ['bs-reload']);
});

ちなみにファイルやディレクトリの構造は以下の通りです。

Comments

[FrontEnd_Japan]

gulpを起動した時にターミナルに表示されるコードも掲載していただけますと幸いです。

Answer 1

下記のbrowsersyncを削除してみても問題解決に至りませんか？

gulp.task('default', ['browser-sync']);　←　ここを削除
gulp.task('default', ['browser-sync'], () => {
    gulp.watch("../now-ui-kit-hajimemaster/*.html",            ['bs-reload']);
    gulp.watch("../now-ui-kit-hajimemaster/assets/css/*.css", ['bs-reload']);
    gulp.watch("../now-ui-kit-hajimemaster/assets/js/*.js",   ['bs-reload']);
});