Сказать, что очень странная сборка -- ничего не сказать.
1. Подключайте browser-sync правильно:
const browserSync = require('browser-sync').create();
2. Если вы используете деструктуризацию, используйте ее правильно, для чего дублирование?
const { series, parallel, gulp } = require('gulp');
3. Если вы ипользуете строгий режим, зачем вы смешиваете const и var? Используйте только const (и при надобности let).
4. Если вы используете Gulp 4, можно отказаться от ключевых слов "gulp" и "task". Добавьте в деструктуризацию еще "src" и "dest", чтобы получилось так:
const { series, parallel, src, dest, gulp } = require('gulp');
После чего пишите таски стрелочными функциями и пользуйтесь всеми прелестями gulp 4, например:
const styles = () => {
return src('path.src.style')
.pipe(sass())
.pipe(autoprefixer())
.pipe(csso())
.pipe(dest(path.build.css))
.pipe(browserSync.stream())
};
5. Вотчеры и exports так никто не пишет. Разделите это. У вас должнен быть отдельно вотчер и отдельно дефолтный таск для запуска проекта. В вашем случае в общем се должно выглядеть так:
// Отдельно таск для работы с html
const startHtml = () => {
return src('src/*.html')
.pipe(rigger())
.pipe(dest(path.build.html))
.pipe(browserSync.stream());
};
// Отдельно через browser-sync отслеживаете изменения в html-файлах.
const watcher = () => {
browserSync.init({
server: {
baseDir: './src/'
},
notify: false
});
watch('./src/*.html', startHtml);
}
// Отдельно запускаете это все.
exports.default(series(startHtml, watcher));
