javascript - 任务从未定义: browserSync.重新加载

Question

我从 Gulp 3.x.x 升级到 Gulp 4.0.2 并开始编辑我的 gulpfile 以使其兼容，但当我尝试运行 gulp 时，我遇到了这个错误:

AssertionError [ERR_ASSERTION]: Task never defined: browserSync.reload

这是我认为我的 gulpfile 的相关部分:

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
      browser: 'Chrome'
  })
})

gulp.task('sass', function() {
  return gulp.src('app/styles/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console
    .pipe(gulp.dest('app/styles')) // Outputs it in the css folder
    .pipe(browserSync.reload({ // Reloading with Browser Sync
      stream: true
    }));
})

// Watchers
gulp.task('watch', function() {
  gulp.watch('app/styles/**/*.scss', gulp.series('sass'));
  gulp.watch('app/*.html', gulp.series('browserSync.reload'));
  gulp.watch('app/js/**/*.js', gulp.series('browserSync.reload'));
})

我使用的是 Node 版本 11.15.0。后来的版本给我带来了问题。

Answer 1

您的直接错误是这两行的结果:

gulp.watch('app/*.html', gulp.series('browserSync.reload'));
gulp.watch('app/js/**/*.js', gulp.series('browserSync.reload'));

只需删除 browserSync.reload 调用周围的引号即可:

gulp.watch('app/*.html', gulp.series(browserSync.reload));
gulp.watch('app/js/**/*.js', gulp.series(browserSync.reload));

如果这些调用是对任务的调用，那么将它们放入引号中是正确的。但您的调用不是对任务的调用，而是对您的 const browserSync = require('browser-sync) 包的调用。

因此，使用相同的标识符 - browserSync 来表示您的包需要名称和任务名称会令人困惑，并且可能会导致错误，就像您所做的那样。

如下所示:

gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
      browser: 'Chrome'
  })
})

browserSync 的第一次使用是作为任务名称。第二个位于函数体中，是对包名称的引用。第二个最终是在您的 watch 任务中使用的，不会在那里被引用，因为它不是任务名称。因此，使用 browserSync 这两种方式肯定会令人困惑 - 只需为一个名称选择一个不同的名称，例如:

gulp.task('bSync', function() {
  browserSync.init({......

另请注意添加到上述代码中的 init。您将需要它。