BrowserSyncが自動リロードしないときの対処法

先日BrowserySyncを初めて使ったら、自動リロードされるhtmlファイルと、自動リロードされないhtmlファイルがあり原因を調査しました。この記事では自動リロードしないときの対処法書いています。

自動リロードされない原因

原因はbodyタグがないことでした。

そもそもBrowserSyncはデフォルトではbodyタグの中にjsのスクリプトを埋め込み、それによってブラウザでの変更や、htmlファイルのコードの変更を検知して、自動リロードします。

bodyタグがないとjsのスクリプトが埋め込まれず、変更を検知できなかったので自動リロードされないということでした。

bodyタグ以外にjsを埋め込む

BrowserSyncのドキュメントによると、jsスクリプトを埋め込む位置を独自に設定できます。

例えば、以下のように書き込むとheadの終了タグ直前にjsスクリプトが挿入されます。

module.exports = {
    (省略)
    "snippetOptions": {
      "rule": {
        "match": /<\/head>/i,
        fn: function (snippet, match) {
          return snippet + match;
        }
      }
    }
};

ちなみにBrowserSyncのconfigファイルbs-config.jsは$ (npm bin)/browser-sync initで作ることが出来ます。