javascript - 为什么 Browsersync 会实时重新加载一个编译任务而不是另一个？

Question

我正在运行一个 gulpfile 来编译 Sass、CoffeeScript，并通过 Browsersync 实时重新加载:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var coffee = require('gulp-coffee');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync');

gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(plumber())
    .pipe(sass({
      style: 'expanded',
      precision: 10
    }))
    .pipe(autoprefixer({browsers: ['> 1%', 'last 2 versions',   'Firefox ESR']}))
    .pipe(cssmin())
    .pipe(gulp.dest('./dist'))
    .pipe(browserSync.stream());
});


gulp.task('coffee', function() {
  return gulp.src('./src/coffee/**/*.coffee')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(uglify())
    .pipe(gulp.dest('./dist'))
    .pipe(browserSync.stream());
});


gulp.task('serve', function() {
  browserSync.init({
    proxy: 'http://mamp-site.dev'
  });
  gulp.watch('./src/scss/**/*.scss', ['sass']);
  gulp.watch('./src/coffee/**/*.coffee', ['coffee']);
});

每次我进行更改时，Browsersync 都会成功重新加载我编译的 JS，但不会重新加载我编译的 CSS。我知道将 browserSync.stream() 放在 gulp.dest() 之后是正确的，因为 Browsersync 这么说 only cares about your CSS when it's finished compiling 。我还验证了我的 Sass 正在编译。

为什么 Browsersync 适用于我的 'coffee' 任务，但不适用于我的 'sass' 任务？这是我第一次尝试 gulp，所以我希望它很简单。

编辑:仅在 'serve' 任务中观看 'sass' 才有效，但不能同时观看 'sass' 和 '咖啡'

Answer 1

我不知道为什么你的 sass 没有重新加载，但你不应该在你的 javascript 中使用 browserSync.stream 。也许溪流正在变得困惑。您的 watch 应该是

gulp.watch('./src/coffee/**/*.coffee', ['coffee-watch']);

应该有

gulp.task('coffee-watch', ['coffee'], function (done) {
    browserSync.reload();
    done();
});

从咖啡任务中删除 .pipe(browserSync.stream());。