Open joeswann opened 9 years ago
Weird! That's super annoying! Thanks for detailing this. Short term solution would be to only include gem assets in your application.js/css files, and pull in your gulp generated files separately with gulp_asset_path
. I need to double check that this will work right in production.
for example:
<%= stylesheet_link_tag 'application.css' %>
<link rel="stylesheet" href="<% gulp_asset_path('stylesheets/global.css')%>">
I've faced same problem and the best solution I've found is to downgrade to sprockets 2.12.3.(
I'm currently doing something like this:
<%= stylesheet_link_tag 'frontend', media: 'all' %>
<link rel="stylesheet" href="<%= gulp_stylesheet_path 'init.css' %>" media="all" />
Seems very fragile
here is a snapshot (https://40.media.tumblr.com/3778bd65154560b6840eec61e2a2ab70/tumblr_npcek1oAy31qzp3szo1_1280.png) of the difference betweens what's installed on the gem side as of today (my version on the right, causing the problem, the one from this repo on the left)
It does not break browser sync completely, just the css reload when scss or sass files are modified (you have to reload the page manually to see css changes)
I made a PR to keep sprockets downgraded also had this problem #28
I disabled .self
in sprockets 3 and it worked:
config.assets.debug = false
in development.rb
See: http://stackoverflow.com/questions/29732377/how-to-disable-adding-self-in-sprockets-3-0
I use a workaround in the Gulp task instead of downgrading Sprockets or skipping the asset pipeline completely. The processed CSS files are being renamed with the notorius .self
suffix after gulp.dest
but before passed to BrowserSync. So they can be injected when config.assets.debug = true
. Of course digests must be off.
Example:
var rename = require('gulp-rename');
gulp.task('sass', function () {
return gulp.src(config.src)
.pipe(sourcemaps.init())
.pipe(sass(config.settings))
.on('error', handleErrors)
.pipe(autoprefixer({ browsers: ['last 2 version'] }))
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.dest))
.pipe(rename({
suffix: '.self'
}))
.pipe(browserSync.stream());
});
On a recent project I noticed that rails was adding ".self.(css|js)" to asset tags, which browsersync can't handle. I wasn't sure if this was just my project so I tested with this repo. I also made some very minor changes to get it working on my system (like updating browsersync version). This is with node 0.12.2 and running npm update/bundle update.
The included tags:
My git diff:
diff --git a/Gemfile b/Gemfile index 7c0a052..6457fff 100644 --- a/Gemfile +++ b/Gemfile @@ -1,10 +1,10 @@ source 'https://rubygems.org'