gulp使用browser-sync与编辑sass的问题

Question

sass编译没完成浏览器就刷新了
刷新完sass才编译完成
这个时候还要再刷新一边浏览器浏览器才能看到修改的样式

感觉有点问题 请大神帮我看一下

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

gulp.task('sass', function () {
 return gulp.src('./assets/sass/**/*.scss')
  .pipe(changed('./css'))
  .pipe(sourcemaps.init())
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: true, 
      remove:true 
  }))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./css/'))
  .pipe(browserSync.stream());
});

gulp.task('serve',["sass"],function() {
    browserSync.init({
        proxy: "localhost:8080/"
    });
    gulp.watch("assets/sass/**/*.scss", ['sass']);

});

gulp.task('default', ['serve']);

Answer 1

**我的配置你看下**
//静态服务器 + 监听 scss/html 文件
gulp.task('browser-sync', function() {
    browserSync.init({
        server: "./"
    });

    gulp.watch("css/*.css").on('change', reload);
    gulp.watch("*.html").on('change', reload);
    gulp.watch("*.js").on('change', reload);
});

gulp.task('default', ["browser-sync"]);


// 监听文件变化
gulp.watch('sass/*.scss', function() {
    gulp.run('sass');
});

gulp.watch('css/*.css', function() {
    gulp.run('default');
});

Answer 2

你可以选择监听sass编译完输出的css文件呀，就不会出现这种问题了。

Answer 3

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

// static server
gulp.task('server', function () {
  // 要监听的目录文件  你可以设置为你自己想要监听的目录结构
  var files = [
    './views/*.html',
    './dist/**/*.css',
    './dist/**/*.js'
  ];

  browserSync.init(files, {
    server: {
      baseDir: './'
    }
  })
})

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

//watch
gulp.task('watch', function () {
  gulp.watch('src/sass/*.scss', ['sass']);
})

gulp.task('default', function () {
  gulp.run('server', 'sass', 'watch')
})