Emitter Error on Reload with Multiple Instances

[rwagner00]

Operating System: OSX 10.9.5
NodeJS Version: v0.12.0
NPM Version: 2.5.1
BrowserSync Version: 2.2.3

Gulpfile Contents:

var gulp = require('gulp');
var compass = require('gulp-compass');
var notify = require("gulp-notify");
var plumber = require("gulp-plumber");
var cp = require('child_process');
var browserSync = require('browser-sync');
var bs1 = browserSync.create("proxy1");
var bs2 = browserSync.create("proxy2");

var messages = {
  jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};

/**
 * Build the Jekyll Site
 */
gulp.task('jekyll-build', function (done) {
  browserSync.notify(messages.jekyllBuild);
  return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
    .on('close', done);
});

/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
  browserSync.reload();
});

/**
 * Wait for jekyll-build, then launch the Server
 */
gulp.task('browser-sync', function () {
  bs1.init({
    server: {
      baseDir: '_site'
    },
    port: 3010,
    ui: {
      port: 3011
    }
  });
  bs2.init({
    server: {
      baseDir: '_site'
    },
    port: 3012,
    ui: {
      port: 3013
    }
  });
});


// Calls Compass and Watch when gulp is run.
gulp.task('default', ['browser-sync', 'compass', 'jekyll-build', 'watch']);

// Compass compilation function.
gulp.task('compass', function () {
  var onError = function (err) {
    notify.onError({
      title: "Compass",
      subtitle: "Compilation Failure!",
      message: "Error: <%= error.message %>"
    })(err);
    this.emit('end');
  };

  return gulp.src('_sass/*.scss')
    .pipe(plumber({errorHandler: onError}))
    .pipe(compass({
      css: '_site/css',
      sass: '_sass',
      bundle_exec: 'true',
      debug: 'true'
    }))
    .pipe(bs1.reload({stream: true}))
    .pipe(notify({
      title: 'Compass',
      subtitle: 'Success',
      message: 'Compass successfully compiled!'
    }))
    // This is a workaround to needing to have the compiled CSS in both the
    // css/ and _site/css folder in order to make live reload function.
    // Ideally, Jekyll will be reconfigured to not expect to have css in both
    // places.
    .pipe(gulp.dest('css'));
});

/**
 * Watch scss files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
  gulp.watch('_sass/*.scss', ['compass']);
  gulp.watch(['index.html', '_layouts/*.html', '_posts/*', '_includes/*.html'], ['jekyll-rebuild']);
  gulp.watch('_site/js/*.js', browserSync.reload);
});

Error experience: When I run the default Gulp task, two windows open and both report that they are connected to BrowserSync. I can confirm this behavior by removing reload from the default Compass process and calling bs1.notify('bs1'); and bs2.notify('bs2);, which output to the correct windows. However, whenever I attempt to call bs1.reload() in any way, the reload fails with the below error message.

Error Message:
[21:42:15] Using gulpfile ~/Sites/project/gulpfile.js
[21:42:15] Starting 'browser-sync'...
[21:42:15] Finished 'browser-sync' after 15 ms
[21:42:15] Starting 'compass'...
[21:42:15] Starting 'jekyll-build'...
[21:42:15] Starting 'watch'...
[21:42:15] Finished 'watch' after 22 ms
[21:42:15] gulp-compass: Running command: /usr/bin/bundle exec compass compile /Users/wagner/Sites/project /Users/wagner/Sites/project/_sass/main.scss --no-line-comments --relative-assets --debug-info --css-dir _site/css --sass-dir _sass
[BS] Access URLs:

---

   Local: http://localhost:3010
External: http://192.168.1.6:3010

---

      UI: http://localhost:3011

UI External: http://192.168.1.6:3011

---

[BS] Serving files from: _site
[BS] Access URLs:

---

   Local: http://localhost:3012
External: http://192.168.1.6:3012

---

      UI: http://localhost:3013

UI External: http://192.168.1.6:3013

---

[BS] Serving files from: _site
Configuration file: /Users/wagner/Sites/project/_config.yml
Source: /Users/wagner/Sites/project
Destination: /Users/wagner/Sites/project/_site
Generating...
/Users/wagner/Sites/project/node_modules/browser-sync/lib/public/reload.js:14
emitter.emit("file:changed", {
^
TypeError: Cannot read property 'emit' of undefined
at emitReload (/Users/wagner/Sites/project/node_modules/browser-sync/lib/public/reload.js:14:16)
at Transform.reload._transform (/Users/wagner/Sites/project/node_modules/browser-sync/lib/public/reload.js:72:29)
at Transform._read (_stream_transform.js:179:10)
at Transform._write (_stream_transform.js:167:12)
at doWrite (_stream_writable.js:301:12)
at writeOrBuffer (_stream_writable.js:288:5)
at Transform.Writable.write (_stream_writable.js:217:11)
at write (/Users/wagner/Sites/project/node_modules/gulp-compass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow (/Users/wagner/Sites/project/node_modules/gulp-compass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable (/Users/wagner/Sites/project/node_modules/gulp-compass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:664:5)

Process finished with exit code 1

[rwagner00]

On a personal note, I'm trying to push Gulp and BrowserSync forward at my company as a way to automate and simplify our front end tasks from day->day. My end goal here is to be able to have a Drupal site and the prototype side by side, on multiple browsers, so that changes can be compared and confirmed instantly. There's a lot of interest, but my last several hours of trying to circumvent this error have been fruitless. I hope the bug report helps!

[shakyShane]

This bug is now fixed, but looking at your gulpfile, where you are calling browserSync.reload(); - this will need to point to either of the running instances, not the main browsersync object. For example, in your watch task, this would work better

gulp.watch('_site/js/*.js').on('change', function (){
   bs1.reload();
   bs2.reload();
});

and the same in the jekyll task

/**
 * Rebuild Jekyll & do page reload
 */
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
  bs1.reload();
  bs2.reload();
});

[shakyShane]

npm install browser-sync@2.2.4 --save-dev

:)

[rwagner00]

Sorry, that was an artifact from a partial revert to get it back to working order. Thanks much for the information and for the quick bugfix!

[rwagner00]

Updated version tested and working perfectly, thanks!

[shakyShane]

👍