gulp 添加浏览器同步后手表无法正常工作

Question

我尝试获得一个简单的工作流程运行，其中 sass 文件中的更改会立即转换为 css 并显示在浏览器中（使用本教程：https://css-tricks.com/gulp-for-beginners/) 我在这里查看了类似问题的多个答案，但找不到解决方案。

这是我的 gulpfile:

var gulp = require('gulp');
var sass = require('gulp-sass');


gulp.task('sass', function() {
  return gulp.src('app/**/*.sass') // Gets all files ending with .scss in app/scss
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
    stream: true
  }))
});

var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
  })
})

gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
  gulp.watch('app/**/*.sass', gulp.series(['sass']));
})

当我调用 gulp sass 时，它工作得很好。此外，当我删除 browsersync 并仅使用以下代码时，观看本身有效：

gulp.task('watch', function(){
  gulp.watch('app/scss/*.sass', gulp.series(['sass'])); 
})

浏览器同步（未）发生的方式一定有问题。有人可以帮我吗？非常感谢！

Answer 1

以下不在 gulp v4 语法中：

gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
  gulp.watch('app/**/*.sass', gulp.series(['sass']));
})

将函数移动到 series 个参数中。所以试试这个：

gulp.task('watch', gulp.series('browserSync', 'sass', function(){
  gulp.watch('app/**/*.sass', gulp.series('sass'));
}));

这样 gulp.task() 接受 2 个参数而不是 3 个 - 这就是 gulp v4 方式。不幸的是，那篇文章是用 v3 语法写的，有一些警告要更改 v4 的代码。

gulp 添加浏览器同步后手表无法正常工作

gulp watch not working when browsersync is added

gulp

browser-sync

gulp-watch

gulp-sass