无法读取 gulp 中未定义的属性“手表”

Question

Can some one help please? I keep recieving this error and I really dont know what else to do. When I trigger the command gulp watch in the cmd, I receive the following error TypeError: Cannot read property 'watch' of undefined

 C:\\Apache24\\htdocs\\Gulp>gulp watch [10:37:07] Using gulpfile C:\\Apache24\\htdocs\\Gulp\\gulpfile.js [10:37:07] Starting 'watch'... [10:37:07] 'watch' errored after 4.16 ms [10:37:07] TypeError: Cannot read property 'watch' of undefined at watch (C:\\Apache24\\htdocs\\Gulp\\gulpfile.js:42:10) at watch (C:\\Apache24\\htdocs\\Gulp\\node_modules\\undertaker\\lib\\set-task.js:13:15) at bound (domain.js:422:14) at runBound (domain.js:435:12) at asyncRunner (C:\\Apache24\\htdocs\\Gulp\\node_modules\\async-done\\index.js:55:18) at processTicksAndRejections (internal/process/task_queues.js:75:11)

const {src, dest, series, gulp, parallel} = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

var styleSRC = './src/scss/style.scss';
var styleDIST = './dist/css/';


var jsSRC = './src/js/script.js';
var jsDIST = './dist/js/';


function style() {
    "use strict";
    return src(styleSRC)
        .pipe(sourcemaps.init())
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'compressed'
        }))
        .on('error', console.error.bind(console))
        .pipe(autoprefixer({
            overrideBrowserslist: ["defaults"],
            cascade: false
        }))
        .pipe(rename({basename: 'style', suffix: '.min'}))
        .pipe(sourcemaps.write('./'))
        .pipe(dest(styleDIST));
}


function js() {
    "use strict";
    return src(jsSRC)
        .pipe(dest(jsDIST));
}

const watch = function () {
    "use strict";
    gulp.watch('./src/scss/**/*.scss', {usePolling: true}, gulp.series(style));
    gulp.watch('./src/js/**/*.js', {usePolling: true}, gulp.series(js));
};
exports.default = series(
    parallel(style, js),
    watch
);

exports.watch = watch;
exports.js = js;
exports.style = style;

Answer 1

Try this, remove const and define it as a function.

function watch() {
    "use strict";
    gulp.watch('./src/scss/**/*.scss', {usePolling: true}, gulp.series(style));
    gulp.watch('./src/js/**/*.js', {usePolling: true}, gulp.series(js));
};

Answer 2

I think you have got your destructuring a bit wrong. You have:

const {src, dest, series, gulp, parallel} = require('gulp');
//                          ^ this does not exist - hence the undefined property

I think you want to replace the gulp in the destructuring with watch , so it's now:

const {src, dest, series, watch, parallel} = require('gulp');

and in your watch function do:

// renamed the function to avoid conflict
const watchTask = function () {
    "use strict";
    watch('./src/scss/**/*.scss', {usePolling: true}, series(style));
    watch('./src/js/**/*.js', {usePolling: true}, series(js));
};

exports.default = series(
    parallel(style, js),
    watchTask
);

exports.watch = watchTask;