New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

using browser sync with rails - asset pipeline #50

Closed
fionnbharra opened this Issue Jan 22, 2014 · 14 comments

Comments

Projects
None yet
7 participants
@fionnbharra

fionnbharra commented Jan 22, 2014

I'm trying to use browser sync with rails, using the asset pipeline.

Rails compiles css when they are requested, so it's not possible to give a path to the file before compilation.

files: ["rails/doesnt/have/the/css/yet/application.css", ],

If I point the config towards the sass file, the page reloads rather than injecting the changes.

files: ["assets/application.scss", ],

this may be more of an issue with rails rather than an issue with browser sync but is it possible to avoid the page reload when watching sass rather than css files?

@shakyShane

This comment has been minimized.

Contributor

shakyShane commented Jan 22, 2014

Yeah this is a rails specific problem I'm afraid.

Isn't there some way to make rails compile the sass when the files change instead (something like Guard maybe?)

On 22 Jan 2014, at 13:52, fionnbharra notifications@github.com wrote:

I'm trying to use browser sync with rails, using the asset pipeline.

Rails compiles css when they are requested, so it's not possible to give a path to the file before compilation.

files: ["rails/doesnt/have/the/css/yet/application.css", ],
If I point the config towards the sass file, the page reloads rather than injecting the changes.

files: ["assets/application.scss", ],
this may be more of an issue with rails rather than an issue with browser sync but is it possible to avoid the page reload when watching sass rather than css files?


Reply to this email directly or view it on GitHub.

@fionnbharra

This comment has been minimized.

fionnbharra commented Jan 23, 2014

Thanks, I'll close the issue and have a look at guard

@greypants

This comment has been minimized.

Contributor

greypants commented Jun 4, 2014

I'd vote to reopen this issue until there's at least documentation added on how to deal with this, especially since rails compatibility is listed on the homepage.

@blainekasten

This comment has been minimized.

blainekasten commented Aug 10, 2014

@greypants

This comment has been minimized.

Contributor

greypants commented Aug 11, 2014

Ha. My solution ended up being completely ripping out the asset pipeline and replacing it with gulp tasks. Now browserSync works wonderfully :) (and the rest the tools and workflow that I rely on that don't play nice with the asset pipeline)

It wasn't easy, and there were a few gotchas, but so worth it. I'll never go back. Blog post and a set of rails specific task examples forthcoming.

@fionnbharra

This comment has been minimized.

fionnbharra commented Aug 11, 2014

Yeah, that's what we're doing too. The asset pipeline is more trouble than it's worth, I think it needs a complete overhaul.

@shakyShane

This comment has been minimized.

Contributor

shakyShane commented Aug 11, 2014

@greypants @fionnbharra - 👍 for ditching the asset pipeline....

@jhoffner

This comment has been minimized.

jhoffner commented Sep 23, 2014

@graypants Did you ever get around to blogging? I'm currently trying to replace the pipeline with Gulp and could use the tips.

A few questions:

  • How do you handle digests?
  • How do you handle dev vs production mode?
  • Did you need to write any rails helpers?
  • Any chance you could post your gulp file?
@greypants

This comment has been minimized.

Contributor

greypants commented Sep 23, 2014

@jhoffner We got 99% the way there, and then ended up abandoning ship :(

Gems that depended on the asset pipeline being a thing were the issue. Blog post isn't done yet, but these gists might be useful:

Basic rails integration outline:
https://gist.github.com/greypants/0e4dd85097e2b4ae27be

Describing the problem and options (we ended on option 1):
https://gist.github.com/greypants/3590465cc1e9ad23d1c6

I might have time to put something together with implementation details this week.

@shakyShane might be worth looking into what liveReload is doing to get around this issue. There seem to be some hints in this article: blog.55minutes.com/2013/01/lightning-fast-sass-reloading-in-rails-32/

@jhoffner

This comment has been minimized.

jhoffner commented Sep 23, 2014

@greypants Thanks for the links. Yeah I had pretty much came to the same conclusion and was working on a similar option 1. I'm not using browserfy. Here is where I currently am at:

We are starting to migrate the app over to angularjs and I am building all angular assets with gulp while everything else is sprockets (will probably start porting sass/slim over too). I'm outputting both development and production (concat, uglify, rev) assets to the assets folder and created a simple manifest plugin to write the required files to a json file. A rails helper plugin reads the the manifest and output the script tags based off of which environment is loaded.

We still use heroku so I'm trying to figure out how to not check the compiled files into git and instead only deploy them to heroku directly. I'm thinking the easiest route is just to upload directly to S3.

@snuggs

This comment has been minimized.

snuggs commented Feb 4, 2015

Thanks for the update. We have done the same.

@greypants

This comment has been minimized.

Contributor

greypants commented Feb 18, 2015

@jhoffner I FINALLY came up with a solution that works, and DID get around to blogging: http://viget.com/extend/gulp-rails-asset-pipeline

Hope it's helpful.

@SeanRoberts

This comment has been minimized.

SeanRoberts commented Feb 11, 2016

https://github.com/shakacode/react_on_rails

This gem seems to be focused on getting npm + webpack working within a Rails app. I don't think it would be difficult to ignore or rip out the React stuff if you don't want it. At that point you can either use BrowserSync with webpack or use webpack HMR. Hopefully within the next couple of years we'll have a more standardized way to parcel this kind of thing out of the asset pipeline without all these workarounds.

@greypants' solution is also very helpful for this.

@greypants

This comment has been minimized.

Contributor

greypants commented Feb 12, 2016

I've also added an extras folder to gulp-starter with a README and extra files for getting it set up with Rails. It's more up to date than what's referenced in the blog post.

https://github.com/vigetlabs/gulp-starter/tree/master/gulpfile.js/extras/rails

Gulp-starter is using webpack, but I need to update it to use webpack-dev-middleware with Browsersync instead of compiling files as a separate task. It's a reaaaally nice set up, and have it working on other projects.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment