Gulp browsersync pipe not working

Question

I'm trying to get browsersync (with stream) working, but it doesn't seem to work in pipe context. The sass compiles correctly, then nothing happens. My code is as follows:

gulp.task('sass', function () {
  gulp.src('../css/source/*.scss')
    .on('error', function (err) {

         notify.onError({
           title:    "Gulp",
           subtitle: "Failure!",
           message:  "<%= error.message %>",
           sound:    "Beep"
       })(err);
       this.emit('end');
    })

    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(sourcemaps.write())
    .pipe(concat('build.css'))
    .pipe(gulp.dest('../css/build/dev'))
    .pipe(browserSync.reload({stream:true}))
    .pipe(csso())
    .pipe(gulp.dest('../css/build/min'));
});


gulp.task('default', ['browser-sync'], function(){

    gulp.watch('../css/source/*.scss', ['sass']);

});

In my terminal it does seem to register it though:

[BS] 1 file changed (build.css)
[BS] File changed: ../css/build/dev/build.css

The only way I can get a reload to happen is to add it to the watch task:

gulp.watch("../css/build/dev/*.css",  browserSync.reload);

... but with this method I can't seem to enable the stream, as it doesn't accept a function. I have also tried browserSync.stream() as per the current docs to no avail.

Here is the browsersync task if it helps:

gulp.task('browser-sync', ['sass'], function() {
    browserSync.init({
        proxy: 'local.test.com',
        host: '10.0.1.40'
    });
});

Please help!

Answer 1

Remove the pipe to browserSync in task sass, and add a files key to browserSync.init():

browserSync.init({
  ...
  files: ['../css/**/*.css'],
  ...
});

With the above setup you need neither gulp.watch() (that's for starting tasks based on file changes) nor a gulp task that depends on browserSync. Simply run gulp browser-sync.

Note that this watches the CSS directly to avoid a race condition between the scss changes and browserSync.