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

我正在使用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 两者都可能会导致错误，因为您的软件包要求名称和任务名称与您看上去的一样。

如此处所示：

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

browserSync的首次使用是任务名称。函数主体中的第二个是对包名称的引用。第二个最终是您的watch任务中使用的一个，并且由于不是任务名称而在此处不被引用。因此，两种方式同时使用browserSync绝对是令人困惑的-只需为以下名称选择一个不同的名称即可：

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

还要注意上面代码中添加的init。您将需要它。

任务从未定义：browserSync.reload

1 个答案: