Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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をシームレスに開発する環境が整いました :-)

スクリーンショット 2015-03-30 17.13.27.png

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

スクリーンショット 2015-03-30 17.36.43.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした