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オプションを設定できます。
