How to set up Gulpfile.js?

Question

gulp.js

gulpfile looks like this:

var gulp = require('gulp'),
    less = require("gulp-less");
    browserSync = require("browser-sync");

gulp.task("less", function() {
    return gulp.src("app/less/main.less")
        .pipe(less())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.reload({stream: true}))
});

gulp.task("browser-sync", function() {
    browserSync ({
        server: {
            baseDir: "app"
        },
    });
});

gulp.task("watch", function() {
    gulp.watch("app/less/**/*.less", gulp.series("less"));
});

gulp.task("default", gulp.series(gulp.parallel("less", "browser-sync"), "watch"));

We launch

$ gulp
[18:48:19] Using gulpfile c:\Users\Ant\Desktop\HTML\Exercises\gulpfile.js
[18:48:19] Starting 'default'...
[18:48:19] Starting 'less'...
[18:48:19] Starting 'browser-sync'...
[18:48:19] Finished 'less' after 212 ms
[Browsersync] Access URLs:
-------------------------------------
Local: localhost:3000
External: 192.168.1.54:3000
-------------------------------------
UI: localhost:3001
UI External: localhost:3001
-------------------------------------
[Browsersync] Serving files from: app

As a result, watch does not work. Can you tell me what is wrong in the gulpfile?

Answer 1

as an option, the folder structure does not match and as a result, watch simply refers to non-existent folders

Answer 2

There was a mistake in the default task, watch fell out

gulp.task("default", gulp.parallel("less", "browser-sync", "watch"));
// или
gulp.task("default",
    gulp.series(
        gulp.parallel("less"),
        gulp.parallel("browser-sync", "watch")
    )
);