Что сделать, что бы js работал на gulpe?

Question

[Marat White]

пробывал подключить через html: - не работает

путь к файлам:

на следующем gulpfile.js любые взаимодействия с js скриптами не работают:

"use strict"

const {src, dest} = require("gulp")
const gulp = require("gulp")
const autoprefixer = require("gulp-autoprefixer")
const cssbeautify = require("gulp-cssbeautify");
const removeComments = require('gulp-strip-css-comments');
const rename = require("gulp-rename");
const rigger = require("gulp-rigger")
const sass = require("gulp-sass")(require('sass'));
const cssnano = require("gulp-cssnano");
const uglify = require("gulp-uglify");
const plumber = require("gulp-plumber");
const panini = require("panini");
const imagemin = require("gulp-imagemin");
const del = require("del");
const notify = require("gulp-notify")
const imagewebp = require("gulp-webp")
const browserSync = require("browser-sync").create();

/* Paths */
const srcPath = "src/"
const distPath = "dist/"


const path = {
    build: {
        html: distPath,
        css: distPath + "assets/css/",
        js: distPath + "assets/js/",
        images: distPath + "assets/img/",
        fonts: distPath + "assets/fonts/"
    },
    src: {
        html: srcPath + "*.html",
        css: srcPath + "assets/scss/*.scss",
        js: srcPath + "assets/js/*.js",
        images: srcPath + "assets/img/**/*.{jpg,png,svg,gif,ico,webp,webmanifest,xml,json}",
        fonts:  srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}"
    },
    watch: {
        html:   srcPath + "**/*.html",
        js:     srcPath + "assets/js/**/*.js",
        css:    srcPath + "assets/scss/**/*.scss",
        images: srcPath + "assets/img/**/*.{jpg,png,svg,gif,ico,webp,webmanifest,xml,json}",
        fonts:  srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}"
    },
    clean: "./" + distPath
}

function serve() {
    browserSync.init({
        server: {
            baseDir: "./" + distPath
        }
    });
}


function html() {
    panini.refresh()
    return src(path.src.html, {base: srcPath})
        .pipe(plumber())
        .pipe(panini({
            root: srcPath,
            layouts: srcPath + "tpl/layouts/",
            partials: srcPath + "tpl/partials/",
            data: srcPath + "tpl/data/"
          }))
        .pipe(dest(path.build.html))
        .pipe(browserSync.reload({stream: true}));
}

function css() {
    return src(path.src.css, {base: srcPath + "assets/scss/"})
        .pipe(plumber({
            errorHandler : function(err) {
                notify.onError({
                    title:    "SCSS Error",
                    message:  "Error: <%= error.message %>"
                })(err);
                this.emit('end');
            }
        }))
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cssbeautify())
        .pipe(dest(path.build.css))
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(removeComments())
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(dest(path.build.css))
        .pipe(browserSync.reload({stream: true}));
}

function js() {
    return src(path.src.js, {base: srcPath + "assets/js/"})
        .pipe(plumber({
            errorHandler : function(err) {
                notify.onError({
                    title:    "JS Error",
                    message:  "Error: <%= error.message %>"
                })(err);
                this.emit('end');
            }
        }))
        .pipe(rigger())
        .pipe(dest(path.build.js))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(dest(path.build.js))
        .pipe(browserSync.reload({stream: true}));
}

function images() {
    return src(path.src.images, {base: srcPath + "assets/img/"})
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.mozjpeg({quality: 75, progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(dest(path.build.images))
        .pipe(browserSync.reload({stream: true}));
}

function webpImages() {
    return src(path.src.images, {base: srcPath + "assets/img/"})
        .pipe(imagewebp())
        .pipe(dest(path.build.images))
}

function fonts() {
    return src(path.src.fonts, {base: srcPath + "assets/fonts/"})
    .pipe(dest(path.build.fonts))
    .pipe(browserSync.reload({stream: true}));
}

function clean() {
    return del(path.clean)
}

function watchFiles() {
    gulp.watch([path.watch.html], html)
    gulp.watch([path.watch.css], css)
    gulp.watch([path.watch.js], js)
    gulp.watch([path.watch.images], images)
    gulp.watch([path.watch.fonts], fonts)
}

const build = gulp.series(clean, gulp.parallel(html, css, js, images, webpImages, fonts))
const watch = gulp.parallel(build, watchFiles, serve)




exports.html = html
exports.css = css
exports.js = js
exports.images = images
exports.webpImages = webpImages
exports.fonts = fonts
exports.clean = clean
exports.build = build
exports.watch = watch
exports.default = watch

Comments

[VoidVolker]

whiteez Правила, пункт 3.8

Answer 1

[chelnokov_a]

Ты что-то не то спрашиваешь)
Каталог dist обычно результат работы gulp

Answer 2

[Andrew E]

Если честно не совсем понятен вопрос. Что значит "js не работает в gulp" и что пытались подключить в html? Опишите, пожалуйста, проблему подробнее. Чем подробнее опишите все, тем больше вероятности что помогут. Ждем-с

Comments

[Marat White]

Проблема в том, что весь код из .js файла не работает на сайте, хотя и html и css и т.д все в норме, именно .js не работает. Код в самом файле корректный, я перепроверял.

Лично я думаю, ошибка в путях либо в gulpfile.js

npm install и node.js все есть, вся проблема в том, что никакой из .js файлов не работает

p.s путь сменил на main.js из папки src - все равно одна и та же проблема

[Marat White]

вот такая тема в консоли

[Marat White]

Я начинающий в данной теме вообще =)

Еще есть догадка, следующий код написан на jQuery?

(он лежит в .js)

$(function () {

    $('.header__btn').on('click', function () {
        $('.rightside-menu').removeClass('rightside-menu--close');
    });
    $('.rightside-menu__close').on('click', function () {
        $('.rightside-menu').addClass('rightside-menu--close');
    });
    
})

если да - то как подключить? Наверное в раз так, то в этом и проблема...

[Andrew E]

whiteez, вот что я вам скажу, дружище, есть замечательный ролик на ютубе, там вместе с автором пошагово соберете себе gulp. Вот прям рекомендую, если будут случаться траблы, читайте комментарии под видео, там найдете ответы на все вопросы.

Почему рекомендую сделать так, а потому что, как минимум, у вас в сборке устаревший синтаксис require. Вы очевидно не сами собирали, а поэтому разобраться и помочь разобраться будет архисложно. А когда соберете сами с нуля, будете ориентироваться в в этом всем и большинство проблем сможете решить сами.

Вот ссылка на ролик . Сам когда-то по нему разобрался в галпе.

Answer 3

[Антон Горецкий]

Gulp не предназначен для работы в браузере и не может в нем работать, поскольку ему нужен доступ к файловой системе. Чтобы его запустить вам нужно установить Node.js, создать папку с проектом и в ней произвести установку нужных пакетов с помощью команды npm install (файл package.json должен быть в этой же папке), либо устанавливая каждый нужный пакет по отдельности. На ютубе полно роликов