Railsでファイル変更に応じてリロードしてくれるBrowserSyncを手軽に導入する

More than 1 year has passed since last update.

BrowserSyncはgrunt, gulpそしてブラウザエクステンションがなくても利用でき大変便利です。LiveReloadより楽だと思います。

  • ファイル更新を検知してブラウザを自動更新
  • 複数のブラウザの動きを同期

などしてくれます。

インストールはnpmからです。

npm install -g browser-sync

browser-sync initとして、設定ファイルをプロジェクト内に作成することも出来るのですが、.gitignoreすら汚したくない場合もあると思うので、スマートにコマンドに引数を渡してみます。

rails s

したあと、

プロジェクトルートで、

browser-sync start --proxy localhost:3000 --files "app/assets/stylesheets/*.css.*","app/views/**/*.html.*","app/assets/javascripts/**/*.js.*"

でOKです。localhost:3001でブラウザが立ち上がります。

簡単なので是非活用して開発効率をあげましょう。