キーワード： ブラウザ、自動更新、自動読み込み、オートリロード、ライブロード
railsで開発しているとき、ファイルに変更があるたびに手動でブラウザの更新ボタンを押さなきゃいけないのはダルいので、自動で再読み込みしてくれるようにした。
Browsersyncというnpmパッケージを利用します。
環境
インストール
Browsersyncのインストール；
npm install -g browser-sync
-g オプションはグローバルにインストールするということらしいです。
設定ファイルなしで実行
まずはサーバーを立てます；
rails server
次に、browser-sync を起動します；
browser-sync start --proxy localhost:3000 --files "app/assets/stylesheets/*.css.*","app/views/**/*.html.*","app/assets/javascripts/**/*.js.*"
引数で監視するファイルを指定しています。
以上で準備は完了です。 適当にviewファイルなどをエディタで編集して保存すると、ブラウザでページが自動的に再読み込みされます。
設定ファイルを作る
上記のコマンドを毎回打つのは大変なので、browser-sync の設定ファイルを作成します。
rails new で生成されたディレクトリ内で、次のコマンドを実行します；
browser-sync init
すると bs-config.js が生成されます。
それを開いて、下記の箇所を修正します；
module.exports = { // 略 // "files": false, "files": [ "app/assets/stylesheets/*.css.*", "app/views/**/*.html.*", "app/assets/javascripts/**/*.js.*" ], // 略 // "proxy": false, "proxy": "localhost:3000", //略 };
これで、さっきのコマンドの代わりに、以下のコマンドでも同じように働きます；
browser-sync start --config bs-config.js
もう少し楽をする
もう少し楽をしましょう。
rails new したときに生成された package.json に、以下のコマンドを追加します；
"scripts": { "start": "browser-sync start --config bs-config.js" }
そうすれば、rails s した後に次のコマンドを実行するだけ良くなります；
npm run start
以上！
