我正在尝试修复使用 Gulp 时的引用错误 4，它不会观看我的 sass 也不会在浏览器中显示更改

Question

我似乎无法弄清楚错误在说什么。我正确地设置了其他所有内容，但是 none 由于错误，它的工作正常。而且我似乎无法在任何地方找到这个确切的问题。任何帮助将不胜感激。

我一直收到这个错误。

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

错误指向的具体代码。

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

我建议采用第二种方法。

我正在尝试修复使用 Gulp 时的引用错误 4，它不会观看我的 sass 也不会在浏览器中显示更改

I'm trying to fix a reference error when using Gulp 4, It won't watch my sass nor show the changes in the browser

gulp