Railsでファイル変更時のオートリロードを実現 #Rails

静的ページのコーディング時、これまではvscodeの拡張機能によってオートリロードを実現していました。
Rails環境(動的ページ)でも同じことを実現する方法がわかったので、ここにまとめていきます。

当初guard-livereloadというgemを使おうと思ったのですが、開発が止まっている雰囲気だったのと、(少なくとも)デフォルトの設定だとscssファイルの変更時に再読み込みが行われなかったので、最終的にbrowser-syncを使って実装しました。

gulpもwebpackもブラウザの拡張機能も不要なので、けっこう手軽です。

実装方法

$ npm install -g browser-sync

/usr/local/lib/node_modules/browser-syncへの書き込み権限が無い！と怒られたので、以下の記事を参考にsudo chown -R $(whoami) $(npm root -g)で解決しました。
npm のグローバルインストールに失敗したら

$ rails s

$ browser-sync start --proxy localhost:3000 --files "app/assets/stylesheets/*/*.scss","app/views/*/*.html.*"

プロキシや監視対象のファイルを引数で渡さずに、設定ファイルに記述することも可能です。

$ npx browser-sync init

bs-config.js

//他の記述は削除
module.exports = {
    "files": ["app/assets/stylesheets/*/*.scss", "app/views/*/*.html.*"], 
    "proxy": 'localhost:3000'
};

package.json

{
  "scripts": {
    "bs": "browser-sync start --config bs-config.js"
  }
}

起動

$ rails s
$ npm run bs