Почему перестал запускаться browsersync после того как добавил gulp-less?

Question

[Руслан]

Здравствуйте. Делал проект сначала без less, просто на css, все работало. Таким образом:

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

Всё работало, browsersync запускался и обновлял страницу.
Но стоило добавить gulp-less, и всё поломалось

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

less тоже пытаюсь через browsersync прогонять, чтобы компилировался и сразу отслеживать изменения. Но выдает ошибку
assert.js:351
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (C:\Users\Руслан\Documents\work\development\page-p
roofs\forless\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (C:\Users\Руслан\Documents\work\development\page-proofs\forless
\node_modules\undertaker\lib\task.js:13:8)
at Object. (C:\Users\Руслан\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)

Comments

[Сергей delphinpro]

Потому что GULP 4

В первую очередь всё-таки нужно читать документацию к используемым инструментам.

[victorbaranov]

Возможно стоит по пытаться по переименовать 'less'. может он конфликтует с твои var less = require('gulp-less')

[Максим]

victorbaranov, да у меня было такое с sass, пришлось переименовать в sassTask.
Руслан, какой версии gulp стоит? gulp -v

[Руслан]

В общем изменил таким образом

var gulp = require('gulp'),
	concatCSS = require('gulp-concat-css'),
	bs = require('browser-sync'),
	less = require('gulp-less');

const les = function() {
	return gulp.src("src/less/*.less")
	.pipe(less())
	.pipe(gulp.dest("srs/css"))
	.pipe(bs.stream());
}

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

gulp.task(les);
gulp.task(server);
gulp.task(gulp.parallel([server, les]));

Он запустился без ошибок и less файл скомпилировался в css при первом запуске.
Но теперь при дальнейшей работе обновляться не хочет. Изменения в файле index.html обновляются, а изменения в less не компилируются снова

[Руслан]

victorbaranov, да, видимо конфликтовал. Я изменил его название, он запустился без ошибок и скомпилировался при первом запуске, но дальше обновления не пишутся

[Руслан]

Максим, gulp 4 версии - 4.0.0

[Руслан]

Сергей delphinpro, переделал, запускается без ошибок сейчас

var gulp = require('gulp'),
	concatCSS = require('gulp-concat-css'),
	bs = require('browser-sync'),
	less = require('gulp-less');

const les = function() {
	return gulp.src("src/less/*.less")
	.pipe(less())
	.pipe(gulp.dest("srs/css"))
	.pipe(bs.stream());
}

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

gulp.task(les);
gulp.task(server);
gulp.task(gulp.parallel([server, les]));

и даже less скомпилировался в css при первом запуске. Но при дальнейших изменениях не компилируется

[Сергей delphinpro]

Руслан, подпапки в папке less есть?

Обычно слежение включают для всей глубины
gulp.watch("src/less/**/*.less", les)

[Руслан]

Сергей delphinpro, нет, подпапок там нет, сразу style.less лежит

[Максим]

Руслан, тебе нужно использовать не gulp.watch, а bs.watch(config.sass + '/**/*.+(sass|scss)', gulp.parallel(sassTask));

Answer 1

[Андрей Dobrin]

Можете таск server засунуть, наоборот, в watcher:
Для простоты, создайте переменную с настройками сервера:

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

Watcher будет выглядеть так:

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

Где Я поставил крестик, можно пихать еще файлы для просмотра вместе с методом gulp.series или gulp.parallel. Их разница в порядке выполнения тасков. Я рекомендую использовать gulp.series для подобных тасков.