Я пытаюсь исправить ошибку ссылки при использовании Gulp 4, он не будет смотреть мой sass и не показывать изменения в браузере

Question

Я не могу понять, о чем говорит ошибка. Я настроил все остальное правильно, но ничего из этого не работает из-за ошибки. И я не могу найти эту точную проблему нигде. Любая помощь будет принята.

Я получаю эту ошибку.

ReferenceError: watchFiles is not defined
    at Object.<anonymous> (gulpfile.js:42:29)

Специфический код c, на который указывает ошибка.

const watch = gulp.parallel(watchFiles, initBrowsersync);

код над ошибкой для контекста

function initBrowsersync(done) {
    browserSync.init({
        server: {
            baseDir: 'app',
            index: 'index.html'
        },
        startPath: '/html'
    });

    done();
}

gulp.task('watchFiles', () => {
    gulp.watch('app/scss/**/*.scss', gulp.series('style'));
    gulp.watch('app/**/*.html').on('change', browserSync.reload);
    gulp.watch('app/css/*.css').on('change', browserSync.reload);
    gulp.watch('app/javascript/**/*.js').on('change', browserSync.reload);
});

код под ошибкой для контекста

exports.style = style;
exports.watch = watchFiles;
exports.default = watch;

и чуть ниже - другие задачи, которые я установил для запуска, такие как uglify и minify- css.

Answer 1

Изменить

const watch = gulp.parallel(watchFiles, initBrowsersync);

на

const watch = gulp.parallel('watchFiles', initBrowsersync);

При использовании gulp.task('watchFiles',... способа определения задач, тогда ваши другие ссылки для этой задачи должна быть строка.

При использовании function initBrowsersync(done) { определите версию функции, чем вы можете ссылаться на эти задачи как на простую нестроковую ссылку на функцию.

Так что ваш другой можно определить watchFiles следующим образом:

//gulp.task('watchFiles', () => {

function watchFiles() {
  gulp.watch('app/scss/**/*.scss', gulp.series('style'));
  gulp.watch('app/**/*.html').on('change', browserSync.reload);
  gulp.watch('app/css/*.css').on('change', browserSync.reload);
  gulp.watch('app/javascript/**/*.js').on('change', browserSync.reload);
//});
};

, и тогда вы можете использовать:

const watch = gulp.parallel(watchFiles, initBrowsersync);

Я предлагаю этот второй подход.