Rails 4.2.1 + Sprockets 3.0.2 breaks browserSync

[joeswann]

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:

<link rel="stylesheet" media="screen" href="/assets/global.self.css?body=1" />\n
<link rel="stylesheet" media="screen" href="/assets/application.self.css?body=1" />\n
<script src="/assets/jquery.self.js?body=1"></script>\n
<script src="/assets/jquery_ujs.self.js?body=1"></script>\n
<script src="/assets/turbolinks.self.js?body=1"></script>\n
<script src="/assets/global.self.js?body=1"></script>\n
<script src="/assets/application.self.js?body=1"></script>

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'

-gem 'rails', '4.2.0'
+gem 'rails', '4.2.1'
 gem 'sass-rails', '~> 5.0'
 gem 'uglifier', '>= 1.3.0'
 gem 'coffee-rails', '~> 4.1.0'
 gem 'jquery-rails'
 gem 'turbolinks'
 gem 'sqlite3', group: :development
-gem 'pg', group: :production # For heroku
+# gem 'pg', group: :production # For heroku
diff --git a/Gemfile.lock b/Gemfile.lock
index e42c4c0..2c5286e 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,36 +1,36 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actionmailer (4.2.0)
-      actionpack (= 4.2.0)
-      actionview (= 4.2.0)
-      activejob (= 4.2.0)
+    actionmailer (4.2.1)
+      actionpack (= 4.2.1)
+      actionview (= 4.2.1)
+      activejob (= 4.2.1)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 1.0, >= 1.0.5)
-    actionpack (4.2.0)
-      actionview (= 4.2.0)
-      activesupport (= 4.2.0)
-      rack (~> 1.6.0)
+    actionpack (4.2.1)
+      actionview (= 4.2.1)
+      activesupport (= 4.2.1)
+      rack (~> 1.6)
       rack-test (~> 0.6.2)
       rails-dom-testing (~> 1.0, >= 1.0.5)
       rails-html-sanitizer (~> 1.0, >= 1.0.1)
-    actionview (4.2.0)
-      activesupport (= 4.2.0)
+    actionview (4.2.1)
+      activesupport (= 4.2.1)
       builder (~> 3.1)
       erubis (~> 2.7.0)
       rails-dom-testing (~> 1.0, >= 1.0.5)
       rails-html-sanitizer (~> 1.0, >= 1.0.1)
-    activejob (4.2.0)
-      activesupport (= 4.2.0)
+    activejob (4.2.1)
+      activesupport (= 4.2.1)
       globalid (>= 0.3.0)
-    activemodel (4.2.0)
-      activesupport (= 4.2.0)
+    activemodel (4.2.1)
+      activesupport (= 4.2.1)
       builder (~> 3.1)
-    activerecord (4.2.0)
-      activemodel (= 4.2.0)
-      activesupport (= 4.2.0)
+    activerecord (4.2.1)
+      activemodel (= 4.2.1)
+      activesupport (= 4.2.1)
       arel (~> 6.0)
-    activesupport (4.2.0)
+    activesupport (4.2.1)
       i18n (~> 0.7)
       json (~> 1.7, >= 1.7.7)
       minitest (~> 5.1)
@@ -41,15 +41,14 @@ GEM
     coffee-rails (4.1.0)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0, < 5.0)
-    coffee-script (2.3.0)
+    coffee-script (2.4.1)
       coffee-script-source
       execjs
-    coffee-script-source (1.9.0)
+    coffee-script-source (1.9.1.1)
     erubis (2.7.0)
-    execjs (2.3.0)
-    globalid (0.3.2)
+    execjs (2.5.2)
+    globalid (0.3.5)
       activesupport (>= 4.1.0)
-    hike (1.2.3)
     i18n (0.7.0)
     jquery-rails (4.0.3)
       rails-dom-testing (~> 1.0)
@@ -62,64 +61,59 @@ GEM
       mime-types (>= 1.16, < 3)
     mime-types (2.4.3)
     mini_portile (0.6.2)
-    minitest (5.5.1)
-    multi_json (1.10.1)
+    minitest (5.6.0)
     nokogiri (1.6.6.2)
       mini_portile (~> 0.6.0)
-    pg (0.18.1)
     rack (1.6.0)
     rack-test (0.6.3)
       rack (>= 1.0)
-    rails (4.2.0)
-      actionmailer (= 4.2.0)
-      actionpack (= 4.2.0)
-      actionview (= 4.2.0)
-      activejob (= 4.2.0)
-      activemodel (= 4.2.0)
-      activerecord (= 4.2.0)
-      activesupport (= 4.2.0)
+    rails (4.2.1)
+      actionmailer (= 4.2.1)
+      actionpack (= 4.2.1)
+      actionview (= 4.2.1)
+      activejob (= 4.2.1)
+      activemodel (= 4.2.1)
+      activerecord (= 4.2.1)
+      activesupport (= 4.2.1)
       bundler (>= 1.3.0, < 2.0)
-      railties (= 4.2.0)
+      railties (= 4.2.1)
       sprockets-rails
     rails-deprecated_sanitizer (1.0.3)
       activesupport (>= 4.2.0.alpha)
-    rails-dom-testing (1.0.5)
+    rails-dom-testing (1.0.6)
       activesupport (>= 4.2.0.beta, < 5.0)
       nokogiri (~> 1.6.0)
       rails-deprecated_sanitizer (>= 1.0.1)
-    rails-html-sanitizer (1.0.1)
+    rails-html-sanitizer (1.0.2)
       loofah (~> 2.0)
-    railties (4.2.0)
-      actionpack (= 4.2.0)
-      activesupport (= 4.2.0)
+    railties (4.2.1)
+      actionpack (= 4.2.1)
+      activesupport (= 4.2.1)
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
     rake (10.4.2)
-    sass (3.4.11)
-    sass-rails (5.0.1)
+    sass (3.4.13)
+    sass-rails (5.0.3)
       railties (>= 4.0.0, < 5.0)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (~> 1.1)
-    sprockets (2.12.3)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
+    sprockets (3.0.2)
       rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
     sprockets-rails (2.2.4)
       actionpack (>= 3.0)
       activesupport (>= 3.0)
       sprockets (>= 2.8, < 4.0)
     sqlite3 (1.3.10)
     thor (0.19.1)
-    thread_safe (0.3.4)
+    thread_safe (0.3.5)
     tilt (1.4.1)
     turbolinks (2.5.3)
       coffee-rails
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
-    uglifier (2.7.0)
+    uglifier (2.7.1)
       execjs (>= 0.3.0)
       json (>= 1.8.0)

@@ -129,8 +123,7 @@ PLATFORMS
 DEPENDENCIES
   coffee-rails (~> 4.1.0)
   jquery-rails
-  pg
-  rails (= 4.2.0)
+  rails (~> 4.2.0)
   sass-rails (~> 5.0)
   sqlite3
   turbolinks
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index 0958cb5..b447a1c
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     ]
   },
   "dependencies": {
-    "browser-sync": "~1.3.6",
+    "browser-sync": "^2.4.0",
     "browserify": "^8.0.2",
     "coffeeify": "~0.7.0",
     "del": "^1.1.1",

[greypants]

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')%>">

[DimitryDushkin]

I've faced same problem and the best solution I've found is to downgrade to sprockets 2.12.3.(

[joeswann]

I'm currently doing something like this:

<%= stylesheet_link_tag 'frontend', media: 'all' %>
<link rel="stylesheet" href="<%= gulp_stylesheet_path 'init.css' %>" media="all"  />

[benbonnet]

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)

[mfbx9da4]

I made a PR to keep sprockets downgraded also had this problem #28

[nimzco]

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

[wethecode]

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());
});