browser-syncかわいいよbrowser-sync

browser-syncかわいいよ。railsでも問題なくつかえるよ。

npm install -g browser-sync

して、プロジェクトディレクトリで

browser-sync init

からの設定ファイルいじって

browser-sync start

はいかんりょ〜

ただデフォルトで使うポートが3000-3100でrailsとかぶっちゃう。browser-syncの方をあとから起動すればちゃんと3001と3002を使ってくれるんだけど、起動の順番気にするのもだるいし設定でポートの指定をかえておくとよいね。

ちなみに今はこんな感じで指定してる。

bs-config.js

files: ["app/assets/stylesheets/*.css.*","app/views/**/*.html.*","app/assets/javascripts/**/*.js.*"]

ports: {
    min: 13000,
    max: 13100
}

でレイアウトで読み込ませればオッケー★

layouts/application.html.slim

- if Rails.env == 'development'
  javascript:
    document.write("<script defer src='//HOST:13000/socket.io/socket.io.js'><\/script><script defer src='//HOST:13001/client/browser-sync-client.0.9.1.js'><\/script>".replace(/HOST/g, location.hostname));

追記

と、ここまで書いてみたものの、いちいちviewに書くのもアレだしエラーでたときにうまく動かないし、proxy modeでやった方がいいんじゃないかと思ったので、これで。

files: ["app/assets/stylesheets/*.css.*","app/views/**/*.html.*","app/assets/javascripts/**/*.js.*"]

# proxy: false
proxy: 'localhost:3000'

このやり方だとrailsのサーバー立ち上げたあとにbrowser-syncを上げることになるし、ポートの指定なんかもそのままでいいよね。startしたら勝手にブラウザ開いてくれるし。これでいこう。