Browser-sync: gulp-watch + browserSync.reload doesn't work

[fundon]

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.

[OnkelTem]

Crap, I accidentally removed my post. Ok, one more time.
I said you fundon are lucky because for me it doesn't work all.
I had to put aside all my gulp taks which amount is great and switched to this simple example from the docs:

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

var src = {
    scss: './src/sass/*.scss',
    css:  './path_to_theme/css/',
    html: './path_to_theme/templates/*.tpl.php'
};

gulp.task('serve', ['sass'], function() {

    browserSync({
        //server: "./app"
        proxy: {
            target: 'myvhosname'
        },
        logLevel: 'debug',
        logConnections: true
    });

    gulp.watch(src.scss, ['sass']);
    gulp.watch(src.html).on('change', reload);
});

// Compile sass into CSS
gulp.task('sass', function() {
    return gulp.src(src.scss)
        .pipe(sass())
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream: true}));
});

gulp.task('default', ['serve']);

When I edit one scss files, sass task is successfully executed and the css file is rebuilt. This is what I see in the console:

[01:30:30] Starting 'sass'...
[BS] 1 file changed (styles.css)
[01:30:30] Finished 'sass' after 678 ms

but no reloading occures, no any other messages from BS or any activity in Network tab of ChromeDevTools. I'm out of ideas and I've spent about 7 hours on this.

ANY IDEAS?

[shakyShane]

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

[fundon]

@OnkelTem Which's version of browser-sync on your side?

I use the latest version.
I also use the gulp-watch.

BTW, You should try it by my way. Good luck!

[OnkelTem]

Thank you guys for the quick replies!

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

Of course, and the animated message from BS appears on first load of the page.
I forgot to mention that full reloading on one of .tpl.php-files edit is working fine.
So for me it looks like .pipe(reload({stream: true})) line doesn't work.

[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.