< Return to Blog

Using BrowserSync and Gulp with the Rails Asset Pipeline

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.