Rails + BrowserSync でViewをシームレスに開発する

RailsでHTMLやCSSを変更するたびにブラウザをリロードするのも面倒だし、
種類の違うブラウザで同じ挙動の確認をするのも面倒だなと思っていました。

そこでBrowserSyncをRailsと組み合わせてViewをシームレスに開発してみます。
BrowserSyncについてはQiitaで記事検索すると色々わかると思います。
http://qiita.com/search?q=BrowserSync&sort=rel&utf8=%E2%9C%93

作成したアプリケーションのコードはGithubに置いてあります。
https://github.com/hiro-su/rails-browser_sync

構成

RailsのViewにBrowserSync用のコードを挿入したくないので、BrowserSyncをプロキシモードで起動します。http://localhost:3002 にアクセスするとRailsアプリへとリバースプロキシされます。

Rails アプリ	BrowserSync UI	BrowserSync Proxy
localhost:3000	localhost:3001	localhost:3002

ちなみに作業環境はMacです。

Railsアプリケーションの作成

プロジェクト作成

$ rails new rails-browser_sync --skip-bundle
$ cd rails-browser_sync

turbolinksを無効にする

turbolinksが有効だと画面遷移時にBrowserSyncのproxyが刺さるため無効にします。

$ git diff Gemfile

-gem 'turbolinks'
+#gem 'turbolinks'

$ git diff app/assets/javascripts/application.js

-//= require turbolinks

$ git diff app/views/layouts/application.html.erb

-  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+  <%= stylesheet_link_tag    'application', media: 'all' %>
+  <%= javascript_include_tag 'application' %>

bundle install

$ bundle install --jobs=10

scaffoldでアプリケーション作成

$ rails g scaffold Bookmark title:string url:string
$ rake db:migrate

BrowserSync

インストール

BrowserSyncのインストールがまだの場合はインストールします。

npm install -g browser-sync

設定ファイルの作成

カレントディレクトリにbs-config.jsというファイルが作成されます。

$ browser-sync init
[BS] Config file created bs-config.js
[BS] To use it, in the same directory run: browser-sync start --config bs-config.js

設定ファイルの編集

変更を監視するファイルの指定とBrowserSyncをプロキシモードで動かすための指定を行います。

$ git diff bs-config.js

-    "files": false,
+    "files": ["app/assets/stylesheets/*.css.*","app/views/**/*.html.*","app/assets/javascripts/**/*.js.*"],  // 変更を監視するファイル
     "server": false,
-    "proxy": false,
-    "port": 3000,
+    "proxy": "localhost:3000", // Railsアプリのポート番号
+    "port": 3002,              // BrowserSyncのポート番号
     "middleware": false,
     "ghostMode": {
         "clicks": true,

Foreman

Foremanを使って起動させます。
Foremanのインストールがまだの場合はインストールします。

$ gem install foreman -N

Procfileの作成

Railsが起動してからBrowserSyncを起動するようにしています。

$ vim Procfile
web: rails s
bs: ruby -e "sleep 1 until File.exists?('tmp/pids/server.pid')" && browser-sync --config bs-config.js start

起動

$ foreman start

BrowserSyncが起動すると http://localhost:3002 が開くと思います。
ChromeとFirefoxなど複数のブラウザで http://localhost:3002/bookmarks を開き、
app/views/bookmarks/index.html.erb 等のhtmlファイルを編集してみてください。

Viewをシームレスに開発する環境が整いました :-)

BrowserSync UI (http://localhost:3001) にアクセスするとSyncオプションを設定できます。