Gulp-sass and browser-sync don't reload browser

Question

When I change some scss file everything seems to work (scss is compiled to css file and the source files are watched):

[21:19:46] Starting 'sass'...
[BS] 1 file changed (principal.css)
[21:19:46] Finished 'sass' after 18 ms

But I need to reload the browser by hand to reflect the changes. This is my gulpfile:

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

// Static Server + watching scss/html files
gulp.task('default', ['sass'], function() {

    browserSync.init({
        proxy: "huertajalon/"
    });

    gulp.watch("./sass/**/*.scss", ['sass']);
    gulp.watch("./*.php").on('change', browserSync.reload);
    gulp.watch("./style.css").on('change', browserSync.reload);

});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("sass/principal.scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"))
        .pipe(browserSync.stream());
});

In other cases (for example, when I modify and save style.css) the browser reloads well.

What am I doing wrong? Thanks!

Answer 1

Are you using browser-sync version 2.6.0 or higher, since this is required to use browserSync.stream(). http://www.browsersync.io/docs/api/#api-stream

If not then you should update or you could try browserSync.reload({stream: true}) instead, which was the previous way to handle streams with browser-sync. If I remember correctly.

Answer 2

Try something like this.

gulp.task(default, ['sass'], browserSync.reload);

Also refer to http://www.browsersync.io/docs/gulp/#gulp-reload