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

gulp watch not working when browsersync is added

我尝试获得一个简单的工作流程 运行,其中 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'])); 
})

浏览器同步(未)发生的方式一定有问题。有人可以帮我吗?非常感谢!

以下不在 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 的代码。