Это мой первый опыт работы с gulp.
У меня получилось настроить все необходимые плагины за исключением "browser-sync".
При запуске у меня на 3000 порту появляется содержимое каталога, а 3001 как должно настройки. Но сам сайт не появляется. и даже если пройти по каталогу до index.html то выдает ошибку "Cannot GET /app/index.html"
Так же в пути я указываю папку "app" как корень но он все равно стартует с папки проекта.(папка "app" лежит внутри проекта) Прочел много статей и просмотрел много видео как его запустить, но при повторении появляются два варианта проблем о первой уже описал, а вторая заключается в том что если я добавляю например
"gulp.watch('./app/*.html').on('change', browserSync.reload);"
то появляется ошибка "ReferenceError: browserSync is not defined" и ссылается на место "ge', bro".
И еще момент на всех видео я видел что после запуска автоматически появляется новое окно браузера. У меня такого не происходит.
Что установлено:
"devDependencies": {
"autoprefixer": "^9.6.1",
"browser-sync": "^2.26.7",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-csso": "^3.0.1",
"gulp-uglify-es": "^1.0.4",
"html-minifier": "^4.0.0"
},
"dependencies": {
"del": "^5.1.0"
}
Теперь код:
// Лишнее я убрал, но пробовал разные варианты. Я так понял что этот код должен работать при любых обстоятельствах.
const brSync = require('browser-sync').create();
function watchB(){
brSync.init({
sever: "./app"
});
//gulp.watch('./app/*.html').on('change', browserSync.reload);
//watch('app/css/*.css').on('change', browserSync.reload);
//watch('app/js/*.js').on('change', browserSync.reload);
}
exports.w = series(watchB);
Данный код запускает сервер, но я получаю первую проблему. Еще я пробовал 2 варианта ниже которые дают такой же результат.
gulp.task('s', function () {
brSync.init({
sever: {
baseDir: "./app"
},
notify: false
});
//gulp.watch('./app/**/*.html').on('change', browserSync.reload);
//gulp.watch('app/css/*.css').on('change', browserSync.reload);
//gulp.watch('app/js/*.js').on('change', browserSync.reload);
});
gulp.task('s', function () {
browserSync.init({
server: "./app"
});
//gulp.watch('./app/**/*.html').on('change', browserSync.reload);
//gulp.watch('app/css/*.css').on('change', browserSync.reload);
//gulp.watch('app/js/*.js').on('change', browserSync.reload);
});
Если я раскоментирую любую строку с "gulp.watch" то получаю ошибку. Так же описную выше.
