Auto reload css with Browersync

Question

I cant seem to achieve auto reloading with Browersync when I make changes to my main.scss file. I've gotten Browsersync to reload browser automatically upon html changes but not css

Using gulp as my task manager. What am I'm missing here to get browser to reload after css changes are made? Or dose Browersync and gulp integration not support reloading after css changes were made?

I've googled around on this topic and I've noticed that there are a few others that have also received the same issue.

What would you recommend me using for a auto reload for css changes if I cant figure this out? Chromedev tools? Nodemon? or a Chrome extension?

Here's my gulpfile

// refferance gulp
var gulp = require('gulp');

// browser-sync
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// other packages installed
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');

var source = {
    scss: './/src/scss/*.scss',
    css: './/dest/css/*.css',
    html: './*.html'
};

// browser-sync task
gulp.task('browser-sync',['styles'], function(){
    browserSync({
        server:'./'
    });
    gulp.watch(source.scss,['scss']);
    gulp.watch(source.html).on('change',reload);
});

// scripts task
gulp.task('scripts', function(){
    // fetch all files in the .js extension in the /src/js directory
    return gulp.src('./src/js/*.js')
    // concatinate files and save as app.js
    .pipe(concat('app.js'))
    // save app.js in dest directory
    .pipe(gulp.dest('./dest/js/'))
    .pipe(uglify())
    // minfiy file and rename to app.min.js
    .pipe(rename({
        suffix: '.min'
    }))
    // save in dest directory
    .pipe(gulp.dest('./dest/js'));
});


// styles task
gulp.task('styles', function(){
     // fetch all files with scss extension in /src/scss directory
    return gulp.src('./src/scss/*.scss')
    // compile scss
    .pipe(scss())
    // output css in css dest directory
    .pipe(gulp.dest('./dest/css/'))
    // minify css
    .pipe(cssmin())
    // rename as styles.min.css
    .pipe(rename({
        suffix: '.min'
    }))
    // save in same directory
    .pipe(gulp.dest('./dest/css'))
    // injecting css into browser via browsersync
    .pipe(reload({stream:true}));
});

// we use the watch task in the default task bellow
gulp.task('watch',function(){
    // watch js
    gulp.watch('./src/js/*.js',['scripts']);
    // watch scss
    gulp.watch('./src/scss/*.scss',['styles']);
});

// default task allows us to run all tasks at once by just runing `gulp` in command line
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']);

Answer 1

Well issue not really solved, as we discussed on Slack here is a more proper solution that will inject CSS rather than reload the browser.

var gulp        = require('gulp'),
    browserSync = require('browser-sync').create(),
    reload      = browserSync.reload,
    concat      = require('gulp-concat'),
    cssmin      = require('gulp-minify-css'),
    rename      = require('gulp-rename'),
    sass        = require('gulp-sass'),
    uglify      = require('gulp-uglify');

var source = {
    styles: 'src/scss/*.scss',
    js:'src/js/*.js',
    html: '*.html'
};

var destination = {
    styles: 'dest/css',
    js: 'desc/js'
};  

gulp.task('serve', function(){
    browserSync.init({
        server:'./'
    });
});

gulp.task('scripts', function(){
    return gulp.src(source.js)
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest(destination.js))
    .pipe(reload());
});

gulp.task('styles', function(){
    return gulp.src(source.styles)
    .pipe(sass())
    .pipe(cssmin())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest(destination.styles))
    .pipe(reload({stream:true}));
});

gulp.task('watch',function(){
    gulp.watch(source.js,['scripts']);
    gulp.watch(source.scss,['styles']);
});

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

Answer 2

Issue Solved : )

scss changes are now firing browser reload!

Used my source object to link to changes in scss and call gulp.watch(source.scss).on('change',reload); on my scss file.

// path to files
var source = {
    scss: './src/scss/*.scss',
    css: './dest/css/*.css',
    html: './*.html'
};

// serve task 
gulp.task('serve',['styles'], function(){
    browserSync.init({
        server:'./'
    });
    // firing a browser reload on changes to these files
    gulp.watch(source.scss).on('change',reload);
    gulp.watch(source.html).on('change',reload);
});

Then in my styles task I make sure to call .pipe(browserSync.stream()); after .pipe(gulp.dest('./dest/css'))

Finally I reference serve in my default gulp task

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

Then gulp in command line and magic happens! css and html changes are reflected :)

Answer 3

Your browser-sync contained scss gulp.watch points to a scss task that doesn't exist in your gulpfile.js. Consider using your gulp.watch from your watch task.

gulp.task('browser-sync',['styles'], function(){
    browserSync({
        server:'./'
    });
    gulp.watch('./src/scss/*.scss',['styles']);
    gulp.watch(source.html).on('change',reload); 
});