首页 文章

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

提问于
浏览 次
0

我有一个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' 任务？这是我第一次去吞咽，所以我很简单 .

EDIT: 仅在 'serve' 任务内观看 'sass' ，但不同时 'sass' 和 'coffee'

javascript coffeescript gulp browser-sync

1 回答

  • 2

    我不知道为什么你的sass没有重新加载，但你不应该使用browserSync.stream作为你的javascript . 也许这些溪流正在变得混乱 . 你的 Watch 应该是

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

    应该有

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

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

    回复于

相关问题