I have detailed this approach in a simple gist which allows you to run BrowserSync along side a Rails app and its asset pipeline quite nicely — I have tested with a Rails 5 app that I'm currently working on for a client.
A while back I created a Yeoman Foundation Generator that included BrowserSync and getting a similar work-flow for Rails has been on my TODO list. For the longest time, I've relied on Rack::LiveReload
and guard-livereload
, which has its downsides — as CSS injection doesn't always work, and the browser takes a while reloading.
You simply need to add in the gulpfile.js
as detailed below and make sure you install dependencies via npm install -g npm
and npm install --save-dev gulp browser-sync
. If you're already injecting Rack::LiveReload
into your app middleware, stop doing that and you'll be set!
References
This is based on original work by @wnstn as well as his blog post.