Javascript 从未定义任务：browserSync.reload

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

---

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

您的直接错误是由以下两行造成的：

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

的首次使用是作为任务名称。第二个在函数体中，是对包名称的引用。第二个最终是在您的

监视任务中使用的，不会在那里引用，因为它不是任务名称。因此，使用
browserSync
这两种方法肯定会让人困惑-只需为其中一种选择不同的名称，如：

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

还要注意添加到上述代码中的
init
。您将需要它。
您的即时错误是由以下两行造成的：

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
的首次使用是作为任务名称。第二个在函数体中，是对包名称的引用。第二个最终是在您的
监视任务中使用的，不会在那里引用，因为它不是任务名称。因此，使用
browserSync
这两种方法肯定会让人困惑-只需为其中一种选择不同的名称，如：

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

还要注意添加到上述代码中的
init
。您将需要它。
可能需要在函数中重新加载？以这种方式重写相关的代码段，但我得到了相同的错误<代码>管道（函数（）{browserSync.reload（{//Reloading with Browser Sync stream:true}）；}）可能需要在函数中重新加载？以这种方式重写相关的代码段，但我得到了相同的错误<代码>管道（函数（）{browserSync.reload（{//Reloading with Browser Sync stream:true}）；}）