Browser-sync not reloading after SASS compiling

Question

I am trying to make it so after I save a change to my *.scss files that the browser-sync window reloads.

It currently works fine when I save *.html files but I am not sure how to get it working for the SASS files.

Here is my gulp file.

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

// config
var config = {
    sassInput: 'sass/',
    sassOutput: 'src/css/',
    publicRoot: 'src/',
}

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(config.sassInput + '*.scss')
        .pipe(sass())
        .pipe(gulp.dest(config.sassOutput))
        .pipe(browserSync.reload);
});

// vendor prefixes
gulp.task('prefix', function () {
    return gulp.src(config.sassOutput)
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest(config.publicRoot));
});

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: config.publicRoot
        }
    });
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch(config.sassInput + '*.scss', ['sass'], browserSync.reload);
    gulp.watch(config.publicRoot + '*.html', browserSync.reload);
});

// Default Task
gulp.task('default', ['sass', 'prefix', 'browser-sync', 'watch']);

score 1 · Accepted Answer · answered Jan 31 '16 at 02:29

The problem was I needed to call stream().

Here is working function:

gulp.task('sass', function () {
    return gulp.src(config.sassInput + '*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(config.sassOutput))
        .pipe(browserSync.stream());
});

Browser-sync not reloading after SASS compiling

1 Answers1