Gulp: Task never defined: task

Question

I'm trying to figure out how to use Gulp but I keep getting an error that I have no idea how to solve

When I compile my SCSS and JS files using their functions it compiles normaly But when i try setting up javascript gulp.task('watch') or javascript gulp.task('default') I get error msg's

This is my gulpfile.js

const gulp = require('gulp');
const babel = require('gulp-babel');
const cssnano = require('gulp-cssnano');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

const myFiles = [
    './app/js/vendors/*.js',
    './app/js/functions.js',
    './app/js/view.js'
]


gulp.task('sass', function () {
    return gulp.src('./app/style.scss')
        .pipe(sass())
        .pipe(cssnano())
        .pipe(gulp.dest('./dist/css'))
})


gulp.task('js', function () {
    return gulp.src(myFiles)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
})


gulp.task('watch', function () {
    gulp.watch('./app/*.scss', ['sass']);
    gulp.watch('./app/js/**/*.js', ['js']);
});


gulp.task('default', ['sass', 'js', 'watch']);

This is the error I get when i send $ gulp default

assert.js:339
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (C:\Program Files (x86)\Ampps\www\gulp\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (C:\Program Files (x86)\Ampps\www\gulp\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (C:\Program Files (x86)\Ampps\www\gulp\gulpfile.js:40:6)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)

if i remove the function default and try $ gulp watch

[10:19:14] Using gulpfile C:\Program Files (x86)\Ampps\www\gulp\gulpfile.js
[10:19:14] Starting 'watch'...
[10:19:14] 'watch' errored after 3.4 ms
[10:19:14] Error: watching ./app/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (C:\Program Files (x86)\Ampps\www\gulp\node_modules\gulp\index.js:31:11)
    at C:\Program Files (x86)\Ampps\www\gulp\gulpfile.js:35:10
    at taskWrapper (C:\Program Files (x86)\Ampps\www\gulp\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:402:14)
    at runBound (domain.js:415:12)
    at asyncRunner (C:\Program Files (x86)\Ampps\www\gulp\node_modules\async-done\index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)

EDIT: as suggested bellow I changed my gulpfile.js but now I get a different error

gulp.task('watch', function () {
    gulp.watch('./app/*.scss', 'sass');
    gulp.watch('./app/js/**/*.js', 'js');
});

gulp.task('default', gulp.series('sass', 'js', 'watch'));

Error:

$ gulp default
[13:55:37] Using gulpfile C:\Program Files (x86)\Ampps\www\gulp\gulpfile.js
[13:55:37] Starting 'default'...
[13:55:37] Starting 'sass'...
[13:55:37] Finished 'sass' after 153 ms
[13:55:37] Starting 'js'...
[13:55:40] Finished 'js' after 2.49 s
[13:55:40] Starting 'watch'...
[13:55:40] 'watch' errored after 1.84 ms
[13:55:40] Error: watching ./app/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (C:\Program Files (x86)\Ampps\www\gulp\node_modules\gulp\index.js:31:11)
    at C:\Program Files (x86)\Ampps\www\gulp\gulpfile.js:40:10
    at taskWrapper (C:\Program Files (x86)\Ampps\www\gulp\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:402:14)
    at runBound (domain.js:415:12)
    at asyncRunner (C:\Program Files (x86)\Ampps\www\gulp\node_modules\async-done\index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)
[13:55:40] 'default' errored after 2.65 s

Answer 1

These are gulp v3 syntax:

gulp.task('watch', function () {
    gulp.watch('./app/*.scss', ['sass']);
    gulp.watch('./app/js/**/*.js', ['js']);
});

gulp.task('default', ['sass', 'js', 'watch']);

If you are using gulp v4, use this instead:

gulp.task('watch', function () {
    gulp.watch('./app/*.scss', gulp.series('sass'));
    gulp.watch('./app/js/**/*.js', gulp.series('js'));
});

gulp.task('default', gulp.series('sass', 'js', 'watch'));

and search for how to migrate from gulp3 to gulp4.

Answer 2

Leonardo's last comment worked for me - gulp was working fine and then suddenly stopped.

I added a return into each gulp.task and it worked again:

var util = require('gulp-util'),
    gulp = require("gulp"),
    concat = require("gulp-concat"),
    del = require("del"); 

gulp.task('localcss', async function () {
    return gulp
        .src(['wwwroot/css/TradingReplay/tradingreplay-local.css'])
        .pipe(gulp.dest('wwwroot/dist'));
});