如何在css发生更改时重新加载页面

当scss文件发生更改时，我尝试重新加载页面。我下载浏览器syn插件并尝试使用它，但当scss文件发生更改时，它不会重新加载。

实际上我什么

如果scss文件发生更改，则应执行以下步骤

• 将scss文件转换为css文件
• 将css文件转换为css.min文件
• 然后重新加载页面

我可以将sass转换为css文件，将css转换为css.min文件，还可以制作服务器，但在scss文件中更改时不会重新加载。

这是我的gullow.js

var gulp = require('gulp');
//require sass package
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browerSync = require('browser-sync').create();
var reload=browerSync.reload;
gulp.task('serve',['minify-css'],function(){
    browerSync.init({
        server:'./'
    })
   // gulp.watch('scss/*.scss',['minify-css']);
    gulp.watch('scss/*.scss').on('change',reload)

})


// Compile Our Sass
gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest('css'));
});
// css miifilcation
gulp.task('minify-css',['sass'], function () {
    return gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(plumber())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist'));
});
// js minifiction
gulp.task('compress', function() {
    return gulp.src('app/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('jdist'));
});
//concatination of js files
gulp.task('scripts',['compress'], function() {
    return gulp.src('jdist/**/*.js')
        .pipe(concat('all.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/'));
});

// Watch Files For Changes
gulp.task('watch', function () {
    gulp.watch('scss/*.scss', ['sass','minify-css']);
    gulp.watch('app/**/*.js', ['compress','scripts']);
});
gulp.task('default', ['serve']);