Задача не определена: browserSync.reload

Question

Я обновил Gulp 3.xx до 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, добавленный к приведенному выше коду. Вам это понадобится.