任务从未定义：browserSync.reload

Question

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

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

我认为这是我的 gulp 文件的相关部分：

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'));
})

我使用的是节点版本 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));

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

所以使用相同的标识符是令人困惑的，并且可能会导致错误 - browserSync for both 你的包需要名称和你看起来的任务名称做了。

从这里可以看出：

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

browserSync 的第一次使用是作为任务名称。第二个，在函数体中，是对包名称的引用。第二个最终是在您的 watch 任务中使用的那个，不会在那里被引用，因为它不是任务名称。因此，两种方式都使用 browserSync 绝对令人困惑 - 只需为其中一个选择不同的名称即可：

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

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

任务从未定义：browserSync.reload

Task never defined: browserSync.reload

javascript

node.js

gulp