[SOLVED] Browser sync reloading not working

Browser sync reloading not working

I am trying to configure browser synch with gulp, i want to watch my scss files and get them compiled and saved in a folder called dist, when changes are made and I also want to reload my browser when this process is completed. so far I'm successful in watching, compiling and loading result in a new window but I can't get to refresh the browser window when ever further changes are made in the scss file..what am I doing wrong here? and I also want to know if this is the right way to do this.

here is my gulpfile.js

'use strict';
    var gulp = require('gulp'),
        scss = require('gulp-sass'),
        maps = require('gulp-sourcemaps'),
        browsersync = require("browser-sync");




gulp.task("ScssCompiler",function(){
    gulp.src("scss/style.scss")  
    .pipe(maps.init())
    .pipe(scss()) 
    .pipe(maps.write('./'))
    .pipe(gulp.dest('dist')); 
    console.log("entered ScssCompiler");
});

gulp.task("sass-watch",["ScssCompiler"],browsersync.reload);


gulp.task("watchsass",function(){
    browsersync({
        server:{
            baseDir:'./',
        }
    });
    gulp.watch(['scss/*.scss'],['sass-watch']);
    console.log("entered watchsass");
});

gulp.task("build",['watchsass'],function(){
    console.log("entered build");
});

gulp.task("default",['build'],function(){

});

Solution