Ошибка в gulp browser-sync, как исправить?

Question

[Руслан Выборнов]

Не пойму в чем проблема. Browser sync не хочет вотчить за html.
Директорию прописал, а он собака не видит
В чем прикол, когда я кидаю index.html из папки app, в папку где лежит gulpfile.js, то он вотчит. А какого он так делает? Я ему же говорю иди в папку app и бери там html.
Ребята хелп
Вот код

//подключаем пакеты
const { src, dest, parallel, series, watch } = require('gulp');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleancss = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');
const newer = require('gulp-newer');
const del = require('del');

function browsersync() {
browserSync.init({
server: {
baserDir: 'app/'
},
port: 3000,
notify: false
// online: true
});
};

function scripts() {
return src([
'node_modules/jquery/dist/jquery.min.js', // Пример подключения библиотеки
'app/js/app.js', // Пользовательские скрипты, использующие библиотеку, должны быть подключены в конце
])
.pipe(concat('app.min.js')) // Конкатенируем в один файл
.pipe(uglify()) // Сжимаем JavaScript
.pipe(dest('app/js')) // Выгружаем готовый файл в папку назначения
.pipe(browserSync.stream()) // Триггерим Browsersync для обновления страницы
};

function styles() {
return src('app/scss/main.scss')
.pipe(sass())
.pipe(concat('style.min.css'))
.pipe(autoprefixer({
overrideBrowserslist: ['last 10 versions'],
grid: true
}))
.pipe(cleancss( { level: { 1: { specialComments: 0 } }/* , format: 'beautify' */ } )) // Минифицируем стили
.pipe(dest('app/css/'))
.pipe(browserSync.stream())
};

function images() {
return src('app/image/src/**/*')
.pipe(newer('app/image/dest/'))
.pipe(imagemin())
.pipe(dest('app/image/dest/'))
}

function cleanimg() {
return del('app/image/dest/**/*', {force: true} )
}

function cleandist() {
return del('dist/**/*', {force: true} )
}

function buildcopy() {
return src([
'app/css/**/',
'app/js/**/',
'app/image/dest/**/*',
'app/**/*.html/',
], {base: 'app'})
.pipe(dest('dist'));
}

function startwatch() {
watch('app/**/*.scss', styles);
watch(['app/**/*.js', '!app/**/*.min.js'], scripts);
watch('app/**/*.html').on('change', browserSync.reload);
watch('app/image/src/**/*', images);
};

//сделали экспорт функции browsersync
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.styles = styles;
exports.images = images;
exports.cleanimg = cleanimg;
exports.build = series(cleandist, styles, scripts, images, buildcopy)

exports.default = parallel( styles, scripts, browsersync, startwatch);

Comments

[Ольга]

а структура папок и файлов у вас проекте какая? у вас в корне /app собирается index.html?

[approximate solution]

Скрин структуры папок проекта кидайте. В развернутом виде

[Руслан Выборнов]

Ольга Тюлихова, approximate solution,

[approximate solution]

Руслан Выборнов,

server: {
baserDir: 'app/'
},

Пример Вашей невнимательности. Опечатка в слове baseDir. У Вас baserDir. Именно поэтому Ваш сборщик не подхватывает корневую директорию вашего проекта.

[Руслан Выборнов]

approximate solution, Спасибо большое, что вы есть!
С этой секунды постараюсь быть максимально внимательным!

Answer 1

[approximate solution]

Это не решит вашу проблему, но "причешите" код.

function buildcopy() {
return src([
'app/css/**/',            -----------------------//добавить выборку через * или с указанием файлов
'app/js/**/',              ------------------------//добавить выборку через * или с указанием файлов
'app/image/dest/**/*',
'app/**/*.html/',        -----------------------// убрать слеш после *.html
], {base: 'app'})
.pipe(dest('dist'));
}