Gulp не создаёт папку dist,как исправить?

Question

[AstralProj]

Всем добра! Начал изучать JS и разные библиотеки,проблема с Gulp,делал всё как в видео-инструкции,там всё получилось,у меня нет.При запуске Gulp через терминал в VSCode(пробовал разные терминалы),не создаётся папка dist и не следит за изменениями в файлах. Никаких ошибок при этом не выдаёт:
Windows PowerShell
(C) Корпорация Майкрософт, 2009. Все права защищены.

PS C:\Users\AzaxSyndrome\Desktop\BigSite> gulp
[19:41:06] Using gulpfile ~\Desktop\BigSite\gulpfile.js
[19:41:06] Starting 'default'...
[19:41:06] Starting 'browserSync'...
[19:41:06] Starting 'html'...
[19:41:06] Finished 'html' after 35 ms
[Browsersync] Access URLs:
-------------------------------------
Local: localhost:3000
External: 192.168.1.47:3000
-------------------------------------
UI: localhost:3001
UI External: localhost:3001
-------------------------------------
[Browsersync] Serving files from: ./dist/
Также устанавливал include,в index.html файле не могу подключить другой html(footer,header),обращение типа @@includeheader.html не происходит,появляется в браузере как просто запись: @@include('./header.html')

Answer 1

[lchsha]

Скорее всего у вас ошибка в названии переменной. В объекте src и watch, в значениях свойств должна быть переменная source_folder вместо project_folder.

src: {
html: source_folder+ "/*.html",
css: source_folder+ "/scss/style.scss",
js: source_folder+ "/js/script.js",
img: source_folder+ "/img/**/*.{jpg,png,svg,gif,ico,webp}",
fonts: source_folder+ "/fonts/*.ttf",
},
watch: {
html: source_folder+ "/**/*.html",
css: source_folder+ "/scss/**/*.scss",
js: source_folder+ "/js/**/*.js",
img: source_folder+ "/img/**/*.{jpg,png,svg,gif,ico,webp}",

},

Answer 2

[AstralProj]

let project_folder = "dist";
let source_folder = "#src";

let path = {
build: {
html: project_folder + "/",
css: project_folder + "/css/",
js: project_folder + "/js/",
img: project_folder + "/img/",
fonts: project_folder + "/fonts/",
},
src: {
html: project_folder + "/*.html",
css: project_folder + "/scss/style.scss",
js: project_folder + "/js/script.js",
img: project_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
fonts: project_folder + "/fonts/*.ttf",
},
watch: {
html: project_folder + "/**/*.html",
css: project_folder + "/scss/**/*.scss",
js: project_folder + "/js/**/*.js",
img: project_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",

},
clean: "./" + project_folder + "/"
}

let { src, dest } = require("gulp"),
gulp = require("gulp"),
browsersync = require("browser-sync").create();

function browserSync(params) {
browsersync.init({
server: {
baseDir: "./" + project_folder + "/"
},
port: 3000,
notify: false
})
}

function html() {
return src(path.src.html)

.pipe(dest(path.build.html))
.pipe(browsersync.stream())

}

let build = gulp.series(html);
let watch = gulp.parallel(build, browserSync);

exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;