Browsersync stream not working

Question

Browsersync stream is not working for me.

I've copied example from official documentation and it won't working. Reloading for html and js files working fine. Only sass streaming wouldn't work. I've read all the issues on github and can't find an answer for my question.

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');

// Development Tasks
// -----------------

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

    browserSync.init({
        server: {
            baseDir: "./app",
            index: 'index.html'
        }
    });

    gulp.watch('app/styles/*.scss', ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
    gulp.watch('app/pages/*.html').on('change', browserSync.reload);
    gulp.watch('app/js/**/*.js').on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src('app/styles/*.scss'). // Gets all files ending with .scss in app/scss and children dirs
    pipe(sass().on('error', sass.logError)). // Passes it through a gulp-sass, log errors to console
    pipe(gulp.dest('app/css')). // Outputs it in the css folder
    pipe(browserSync.stream());
})

// Build Sequences
// ---------------

gulp.task('default', function(callback) {
    runSequence([
        'sass', 'serve'
    ], callback)
})

gulp.task('build', function(callback) {
    runSequence('clean:dist', 'sass', [
        'useref', 'images', 'fonts'
    ], callback)
})

Answer 1

I would make three quick changes to see if they help. First

const browserSync = require("browser-sync").create();

Note the create() at the end, you need that. Second, simplify this:

gulp.task('default', function(callback) {
  runSequence([
    'sass', 'serve'
  ], callback)
})

to:

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

Your 'serve' task calls the 'sass' task first anyway so you don't need the renSequence stuff. Finally, change:

pipe(browserSync.stream());

to:

pipe(browserSync.reload({stream:true}));

I would also make this change:

gulp.watch('app/js/**/*.js').on('change', browserSync.reload(stream:true}));