gulpとBrowserSync で作るちょっと便利なローカルサーバ

$ npm init -y
$ npm install --save-dev browser-sync gulp

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

// ソースを配置するディレクトリまでの相対パス
const srcDir = 'src'

/**
 * サーバ起動タスク
 */
gulp.task('server', (done) => {
  browserSync.init({
    // BrowserSyncのオプション
    'server': {
      'baseDir': [
        srcDir,
      ],
    },
    'ui': false,
    'ghostMode': false,
    'open':  false,
    'notify': false,
  }, done)
})

/**
 * CSS監視タスク
 */
gulp.task('watch', () => {
  // CSSの監視
  const wacher = gulp.watch(`${srcDir}/**/*.css`)
  // CSS変更時にstreamを使ってブラウザ上へ反映する
  wacher.on('change', (path) => gulp.src(path).pipe(browserSync.stream()))
  return wacher
});

/**
 * デフォルトタスク
 *
 * サーバ起動タスク完了後に、CSS監視タスクを開始する
 */
gulp.task('default', gulp.series(
  'server',
  'watch'
))

$ npx gulp