Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
47
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

スクリーンショット 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
47
Help us understand the problem. What are the problem?