set up a configuration file with gulp. site loads but css injection doesnt occur . how do i fix this?

Question

here is my gulp configuration file. it fires up a server alright and i can view the site in a browser but saving changes just notifies me in command prompt but theres is not injection or change in the browser

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

gulp.task('browser-sync', function(){
    browserSync.init({
            proxy : 'localhost:80/shopbuddydemo'
    });
});

gulp.task('html', function(){
    gulp.src('app/*.html')
    .pipe(reload({stream:true}))
});

gulp.task('css', function(){
  gulp.src('css/*.css')
  .pipe(reload({stream:true}))
});

gulp.task('js',function(){
    gulp.src('js/*.js')
    .pipe(reload({stream:true}));
});

gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        proxy : 'localhost:80/shopDemo'
    });

    gulp.watch("*.html").on("change", reload);
    gulp.watch("css/*.css").on('change',reload);
    gulp.watch("js/*.js").on('change',reload);
});

gulp.task('watch', function(){
    gulp.watch('app/**/*.html', ['html']);
  gulp.watch('css/*.css', ['css']);
    gulp.watch('js/*.js', ['js']);
});

gulp.task('default', ['browser-sync', 'html', 'css', 'js','serve', 'watch']);

Answer 1

This syntax works for me: browserSync.stream() instead of reload({stream:true}) . I believe the latter is an older syntax version.

EDIT : Link for confirmation .

Also, to clarify, reload still works well in the watch tasks, at least in my experience. For example,

const reload = browserSync.reload
gulp.watch(images.src, ['images', reload])
gulp.watch(markup.src, reload)

It's the injection that necessitates browserSync.stream() :

gulp.task('css', function(){
  return gulp.src('css/*.css')
    .pipe(browserSync.stream())
})

EDIT #2 To add to this further, I was just looking through the source code, and technically reload({ stream : true }) should still work :

     /**
     * BACKWARDS COMPATIBILITY:
     * Passing an object as the only arg to the `reload`
     * method with at *least* the key-value pair of {stream: true},
     * was only ever used for streams support - so it's safe to check
     * for that signature here and defer to the
     * dedicated `.stream()` method instead.
     */

    if (_.isObject(opts)) {
        if (!Array.isArray(opts) && Object.keys(opts).length) {
            if (opts.stream === true) {
                return stream(emitter)(opts);
            }
        }
    }

That said, I still have had much better success with the method in my first answer.