vuetifyjs + BrowserSync(lite-server)による変更のブラウザ同期

本記事のVuetifyjs + webpackの構成ははvue-cliを使ってvuetifyjs/webpackテンプレートから作成した想定です。

BrowserSync

フロントエンド開発をしていてブラウザでデバッグするシーンはよくあると思います。
ファイルを変更するたびに、ビルドして、ブラウザリロードして...と毎回実行するのは手間ですよね？

そんな課題を解決してくれるのがBrowserSyncです。
https://www.browsersync.io/

npmなプロジェクトであれば数コマンドで導入できるのでおすすめです。

Vuetifyjsとの相性

長らくフロントエンド開発時はBrowserSyncを愛用していたのですが、最近手を出し始めたVuetifyjs(というかVue.js)+webpackとの相性が悪いみたいで、従来の設定ではうまく動作しませんでした。

具体的には、BrowserSyncはファイルの変更を監視して、変更があればブラウザ側にリロードを通知するような仕組みです。
Vuetifyjsのビルド時はビルド成果物のbuild.jsを一旦空にして、その後ビルドした内容でファイルを更新するようです。
この1回目の空にする更新をトリガーとしてBrowserSyncによりリロードが行われ、2回目の更新時にリロードされないことが多々ありました。(おそらくビルドの長さも関係していると思われます)

解決策

BrowserSyncの設定ファイルである、bs-config.jsに以下のように設定することで解決できます。

bs-config.js

module.exports = {
    watchOptions: {
        awaitWriteFinish: true
    }
};