为什么 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。我知道在gulp.dest() 之后放置browserSync.stream() 是正确的，因为Browsersync 说它only cares about your CSS when it's finished compiling。我还验证了我的 Sass 正在编译。

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

编辑：仅在 'serve' 任务中观看 'sass' 有效，但不适用于 'sass' 和 'coffee'

Answer 1

我不知道为什么您的 sass 没有重新加载，但您不应该将 browserSync.stream 用于您的 javascript。也许溪流混在一起了。你的手表应该是

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

应该有

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

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