Why did browsersync stop running after adding gulp-less?

Question

JavaScript

Hello. I did the project first without less, just on css, everything worked. Thus:

var gulp = require('gulp'),
  concatCSS = require('gulp-concat-css'),
  bs = require('browser-sync').create(),

gulp.task('default', function(){
  return gulp.src('src/*.html')
    .pipe(gulp.dest('dist/html'));
});

gulp.task('server', function(){
  bs.init({
        server: {
            baseDir: "src/"
        }
    });
    gulp.watch("src/*.html").on('change', bs.reload);
});

Everything worked, browsersync started and updated the page.
But it was worth adding gulp-less, and everything broke

gulp.task('less', function() {
    return gulp.src("src/less/*.less")
    .pipe(less())
    .pipe(gulp.dest("srs/css"))
    .pipe(bs.stream());
});
 
gulp.task('server', 'less', function(){
    bs.init({
        server: {
            baseDir: "src/"
        }
    });
    gulp.watch("src/less/*.less", ['less']);
    gulp.watch("src/*.html").on('change', bs.reload);
});

I also try to run less through browsersync so that it compiles and immediately tracks changes. But it gives an error
assert.js:351
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\Ruslan\Documents\work\development\page-p
roofs\forless\node_modules\undertaker\lib\set-task. js:10:3)
at Gulp.task (C:\Users\Ruslan\Documents\work\development\page-proofs\forless
\node_modules\undertaker\lib\task.js:13:8)
at Object. (C:\Users\Ruslan\Documents\work\development\page-proof
s\forless\gulpfile.js:25:6)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object .Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader .js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)

Answer 1

You can serverput the task, on the contrary, in watcher:
For simplicity, create a variable with server settings:

var config = {
server: {
        baseDir: "src/"
    }
}

Watcherwill look like this:

gulp.task('watch', function(){
  browserSync.init(config);
  gulp.watch("src/less/*.less", gulp.series("less")); 
--> x
})

Where I put a cross, you can shove more files to view along with the gulp.seriesor gulp.parallel. Their difference is in the order in which tasks are performed. I recommend using gulp.seriesfor such tasks.