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

我运行着一个gulpfile来通过浏览器同步来编译Sass，CoffeeScript和实时重载：

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'任务？这是我第一次大吃一口，所以我希望这很简单。

编辑：仅在'sass'任务中观看'serve'起作用，但不能同时使用'sass'和'coffee'

最佳答案

我不知道为什么不重新加载sass，但是您不应该在JavaScript中使用browserSync.stream。也许溪流变得混乱起来。你的手表应该是

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

并且应该有

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

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

关于javascript - 为什么Browsersync实时重新加载一个编译任务，而不是另一个？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38861977/