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

Question

我有一个 gulp 文件运行编译 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，所以我希望它很简单。

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

Answer 1

我不知道为什么你的 sass 没有重新加载，但你不应该为你的 javascript 使用 browserSync.stream。也许这些流正在混淆。你的手表应该

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

而且应该有

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

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

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

Why would Browsersync live reload for one compilation task but not another?

javascript

coffeescript

gulp

browser-sync