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

Question

Руслан @kuchuluk

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

Здравствуйте. Делал проект сначала без 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)

Вопрос задан более трёх лет назад
220 просмотров

10 комментариев

Подписаться 1 Простой 10 комментариев

Сергей delphinpro @delphinpro Куратор тега JavaScript

Потому что GULP 4

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

Написано более трёх лет назад
victorbaranov @victorbaranov

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

Написано более трёх лет назад
Максим @kmv18

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

Написано более трёх лет назад

Руслан @kuchuluk Автор вопроса

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

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 не компилируются снова

Написано более трёх лет назад

Руслан @kuchuluk Автор вопроса

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

Написано более трёх лет назад
Руслан @kuchuluk Автор вопроса

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

Написано более трёх лет назад

Руслан @kuchuluk Автор вопроса

Сергей 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 @delphinpro Куратор тега JavaScript

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

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

Написано более трёх лет назад
Руслан @kuchuluk Автор вопроса

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

Написано более трёх лет назад
Максим @kmv18

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 16 минут назад
- 13 просмотров
0

ответов
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 2 часа назад
- 34 просмотра
0

ответов
JavaScript

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 2 часа назад
- 57 просмотров
0

ответов
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 2 часа назад
- 37 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 2 часа назад
- 52 просмотра
1

ответ
Gulp.js

Сложный
Существует ли современный аналог gulp emitty?
- 1 подписчик
- 4 часа назад
- 15 просмотров
0

ответов
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 8 часов назад
- 20 просмотров
0

ответов
npm

+1 ещё

Сложный
Как победить ошибку 404 при установке npm пакета из приватного gitlab registry?
- 2 подписчика
- 14 часов назад
- 133 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 98 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 114 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Разработка VST-плагина

19 апр. 2024, в 20:43

20000 руб./за проект

Нарисовать баннер для интернет-магазина

19 апр. 2024, в 20:35

500 руб./в час

Разработать несистемный алерт

19 апр. 2024, в 20:11

500 руб./за проект

Потому что GULP 4

В первую очередь всё-таки нужно читать документацию к используемым инструментам.
Возможно стоит по пытаться по переименовать '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, да, видимо конфликтовал. Я изменил его название, он запустился без ошибок и скомпилировался при первом запуске, но дальше обновления не пишутся
Сергей 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 при первом запуске. Но при дальнейших изменениях не компилируется
Руслан, подпапки в папке less есть?

Обычно слежение включают для всей глубины
gulp.watch("src/less/**/*.less", les)
Сергей delphinpro, нет, подпапок там нет, сразу style.less лежит
Руслан, тебе нужно использовать не gulp.watch, а bs.watch(config.sass + '/**/*.+(sass|scss)', gulp.parallel(sassTask));

Answer 1 · 2019-04-26 00:15:16

Можете таск 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 для подобных тасков.

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт