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.

Answer 2

You can also try just watching the compiled output files.

Dest/css/styles.css
Dest/js/my.js

Any changes to a sass / js module would reflect in the final css / js output files. Browser reloading will only fire when the css/js compilation has completed, rather than trying to reload as the sass /js bundles compile.

Also, take a look at Gulp-newer. It can be used for checking / triggering tasks if the final output file (dest/css/styles.css) has been changed relative to the files that made it (src/sass/**.scss).

This is also very handy for images (no need to minify them on each build, only if newer) any other checks you need to perform only if something has changed can also be added.