browsersync + gulp not injecting css - only reloading

Question

I have recently moved to using BrowserSync, I followed their gulp guide and tweaked a few things to solve some issues I was having, however now whilst it works, it appears to reload the page every time rather than inject the CSS.

My gulp file:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');

gulp.task('scripts', function() {
    return gulp.src([
        'js/dev/main/**/*.js',
        // We have to set the bootstrap lines separately as some need to go before others
        'js/dev/bootstrap/alert.js',
        'js/dev/bootstrap/collapse.js',
        'js/dev/bootstrap/tooltip.js',
        'js/dev/bootstrap/popover.js',
        'js/dev/bootstrap/tab.js',
        'js/dev/bootstrap/transition.js',
    ])
        .pipe(sourcemaps.init())
            .pipe(concat('scripts.js'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./js'));
});

gulp.task('uglify', ['scripts'], function() {
    return gulp.src('js/scripts.js')
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify({
            mangle: false
        }))
        .pipe(gulp.dest('./js'));
});

// create a task that ensures the `uglify` task is complete before
// reloading browsers
gulp.task('js-watch', ['uglify'], function (done) {
    browserSync.reload();
    done();
});

/* Creates the standard version */

gulp.task('styles', function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(postcss([
                autoprefixer({
                    browsers: [
                        'last 4 Chrome versions',
                        'last 4 Firefox versions',
                        'last 4 Edge versions',
                        'last 2 Safari versions',
                        'ie >= 10',
                        '> 1.49%',
                        'not ie <= 9'
                    ],
                    cascade: false
                }),
            ]))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream(({match: 'css/**/*.css'})));
});

/* Creates the minified version */

gulp.task('css-minify', ['styles'], function() {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                outputStyle: 'compact' // Options: nested, expanded, compact, compressed
            }).on('error', sass.logError))
            .pipe(postcss([
                autoprefixer({
                    browsers: [
                        'last 4 Chrome versions',
                        'last 4 Firefox versions',
                        'last 4 Edge versions',
                        'last 2 Safari versions',
                        'ie >= 10',
                        '> 1.49%',
                        'not ie <= 9'
                    ],
                    cascade: false
                }),
            ]))
            .pipe(cleanCSS({
                advanced: false,
                aggressiveMerging: false
            }))
            .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write('../maps'))
        .pipe(gulp.dest('./css/'));
});

gulp.task('browser-sync', function() {
    browserSync.init({
        open: 'external',
        proxy: "bmmedia.dev",
        host: 'bmmedia.dev',
        // port: 5000,
        browser: "chrome",
    });
});

gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
    gulp.watch(['scss/**/*.scss', 'js/dev/**/*.js'], ['js-watch', 'css-minify']);
});

gulp.task('default', ['js-watch', 'css-minify']);

Notice my watch task, this was the most recent change I did as I was having the problem specified here, and I solved it with this answer, however now whilst it works fine, it appears to only reload, rather than inject.

Is there something I can do to fix this?

Edit:

I just realized it was reloading every time because I was running js-watch every time there was a change, even to .scss files, so I changed it to this:

gulp.task('watch', ['browser-sync', 'js-watch', 'css-minify'], function() {
    gulp.watch(['scss/**/*.scss'], ['css-minify']);
    gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});

However now it doesn't inject OR reload when a .scss file changes.

Answer 1

I believe I have fixed it...

My watch task I changed to:

gulp.task('watch', ['browser-sync'], function() {
    gulp.watch(['scss/**/*.scss'], ['css-minify']);
    gulp.watch(['js/dev/**/*.js'], ['js-watch']);
});

Then in my styles task I changed this line:

.pipe(browserSync.stream(({match: 'css/**/*.css'})));

to:

.pipe(browserSync.stream());

Not sure why it wasn't finding the CSS changes, all I know is it now seems to work.