更新 SASS 时浏览器同步无法与 gulp 一起使用

Question

我有一个运行浏览器同步和 js/sass 编译的 gulpfile。它为我的 Angular SPA 服务。它看起来像这样：

gulp.task('default', function(){
  return runSequence(['build-css', 'build-js'], 'serve-dev');
});

gulp.task('serve-dev', function() {

  browserSync.init(null, {
    server: {
      baseDir: './',
      middleware: [
        modRewrite([
          '!\\.\\w+$ /index.html [L]'
        ])
      ]
    }
  });

  gulp.watch(paths.js.dir + '/**/*.js', ['watch-js']);
  gulp.watch(paths.css.dir + '/**/*.scss', ['watch-css']);
  gulp.watch(paths.html.dir + '/**/*.html').on('change', browserSync.reload);

});

gulp.task('watch-css', ['build-css'], browserSync.reload);
gulp.task('watch-js', ['build-js'], browserSync.reload);

gulp.task('build-css', function() {
  return gulp.src(paths.css.src)
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['> 0.5%']
    }))
    .pipe(cleanCSS())
    .pipe(rename('app.min.css'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.css.dest));
});

gulp.task('build-js', function() {
  return gulp.src(paths.js.src)
    .pipe(sourcemaps.init())
    .pipe(concat('app.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(paths.js.dest));
});

它最初用于为网站提供服务，当我更新 html 文件时它会刷新，但是当我更新 SASS 文件时它不会刷新。所有路径都绝对正确，因为初始编译工作正常。

Answer 1

添加

.pipe(browserSync.stream())

在“build-css”任务结束时。它对我有用