Небольшая проблема с установкой gulp

Question

Устанавливаю gulp и вдруг возникла небольшая проблема. Вроде бы код написан без ошибок, но терминал выдаёт ошибку. Ошибка начала появляться во время написания кода, начиная со второй функции. Вот исходный код

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

let path = {
    build: {
        html: project_folder + "/",
        css: project_folder + "/css/",
        js: project_folder + "/js/",
        img: project_folder + "/img/",
        fonts: project_folder + "/fonts/",
    },
    app: {
        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}",
    },
    clean: "./" + project_folder + "/"
}
let { app, 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 app(path.app.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;

Вот фото с терминала

Answer 1

Как указывал в комментариях: метода app не существует у gulp документация

Мне кажется вы app перепутали с src

Так же перевел все константы из let в const и обратные кавычки в двойные, так как gulp = require(`gulp`) - не шаблонные строки

Проверьте такой конфиг

UPD: так же возникают сомнения по поводу строки let watch = gulp.parallel(build, browserSync); у gulp есть свой метод watch

const project_folder = "dist"; // константа же?
const source_folder = "#app"; // константа же?

const path = {
  build: {
    html: project_folder + "/",
    css: project_folder + "/css/",
    js: project_folder + "/js/",
    img: project_folder + "/img/",
    fonts: project_folder + "/fonts/",
  },
  app: {
    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}",
  },
  clean: "./" + project_folder + "/"
}
const {src, dest, series, parallel} = require("gulp")
const browsersync = require("browser-sync").create();

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

function html() {
  return src(path.app.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;

Answer 2

В общем, ошибка была связана с именем папки app. Исправил на src и всё заработало.

Поскольку я продолжал работу, то тут больше кода, чем в оригинале:

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: 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}",
    },
    clean: "./" + project_folder + "/"
}

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

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

function html() {
    return src(path.src.html)
        .pipe(fileinclude())
        .pipe(dest(path.build.html))
        .pipe(browsersync.stream())
}

function watchFiles(params) {
    gulp.watch([path.watch.html], html);
}

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

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

БЛОГ НА HUSL

Небольшая проблема с установкой gulp

Ответы (2 шт):