gulp-watch + browserSync.reload doesn't work

My case:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('browser-sync', function() {
  browserSync({
    proxy: {
      target: '127.0.0.1:3000'
    }
  });
});

gulp.task('scss', function() {
  return buildCSS();
});

gulp.task('watch:scss', function() {
  return buildCSS(true)
    .on('data', function(file) {
      //console.log(file);
    })
    .pipe(reload({
      stream: true
    }));
});

gulp.task('watch', ['watch:scss', 'browser-sync']);

function buildCSS(watching) {
  var pattern = 'public/scss/*.scss';
  var task = gulp.src(pattern);

  if (watching) {
    task = $.watch(pattern, {
      emit: 'all',
      verbose: true
    })
  }

  return task
    .pipe($.sass())
    .pipe(gulp.dest('public/styles'));
}

When watch:scss before browser-sync, the browser doesn’t reload when file is changed.

gulp.task('watch', ['watch:scss', 'browser-sync']);

But when tweak they positions, it’s working. Why?

gulp.task('watch', ['browser-sync', 'watch:scss']);

I have no idea. How to understand that behaviour?

Maybe https://github.com/floatdrop/gulp-watch/issues/142 same as this.

[shakyShane]

Have you checked http://www.browsersync.io/docs/#requirements

[OnkelTem]

Ok, I’ve discovered something! This was in my html:

link(href="/sites/default/themes/mclinic/css/styles.css", media="screen", rel="stylesheet")

and this is how it looks after BS processing:

<link href="/sites/default/themes/localhost:3000/css/styles.css" media="screen" rel="stylesheet">

Virtual hostname was ‘mclinic’, just like the theme name occurring in the path to the stylesheet. So I think it’s a bug.