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

タスクランナーを使って、ちょっと便利なローカルサーバを作る手順をご紹介します。

対象読者

• タスクランナーって難しそうでなかなか手が出せない
• タスクランナー使ってみたいけど、既存サイト改修ばかりでなかなか導入できる案件がない
• フロントエンド開発のためにXAMPP入れるのはオーバースペックな気がする

特徴

• 構築が簡単にできる
• CSSの変更時に、リロードなしでブラウザ上へ反映する
• htmlの変更時に、ブラウザを自動リロードする かえって邪魔になる場合があるので今回は見送り

ローカルサーバの作成

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

gulpfile.js

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

まとめ

SASS のコンパイル後の CSS 自動反映の方法はよく見かけますが、プレーンな CSS 変更後の自動反映の記事が見当たらなかったので紹介してみました。
また、 BrowserSync の proxy オプションを使えば、バックエンド組み込み後のサイトにも使えますが、そのご紹介はまたの機会に。