gulp browser-sycn无刷新，自动监视sass编译

Question

运行gulp puer 后，修改scss文件，ctrl+s保存后服务终止。
怎么一直监视sass文件呢

var borwserSync = require('browser-sync').create(),

reload = borwserSync.reload,
watch = require('gulp-watch'),
sass = require('gulp-sass');

gulp.task('puer',function(){

borwserSync.init({
    server:{
    baseDir:'./'
    }
});
gulp.watch('sass/**/*.scss',['sass']);
gulp.watch("*.html").on('change',reload);

});

gulp.task('sass',function(){

return gulp.src('sass/**/*.scss')
.pipe(sass()).pipe(gulp.dest( 'dist/css' ) );

});

Answer 1

gulp.watch(['css/*.css'],['css']).on('change',reload)

Answer 2

方案1，每当文件变动时，运行完 sass 任务浏览器重载一次：

// watch-sass
gulp.task('sass-watch', ['sass'], browserSync.reload);

gulp.task('puer',function(){
    borwserSync.init({
        server:{
        baseDir:'./'
        }
    });
    gulp.watch('sass/**/*.scss', ['sass-watch']);
    gulp.watch("*.html").on('change',reload);
});

方案2，热更新的方式，不刷新页面替换css：

gulp.task('sass',function(){
    return gulp.src('sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});