Gulp не работает с веб-пакетом, не может найти ошибку

Question

В настоящее время я пытаюсь внедрить gulp.js в свой проект. Я относительно новичок в этом и не имею опыта в глотке. Я использовал JavaScript раньше, но я далеко не эксперт.

Я использовал этот пример для написания моего файла gulpfile, но, похоже, что-то не так с моими сценариями (я предполагаю, что ошибка находится в моем webpack.config.js?). Компиляция SCSS и браузерная синхронизация работает нормально.

Вот что я пытаюсь сделать:

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

Моя структура папок выглядит следующим образом:

- Resources
  - css
  - js
    - bundle.js
  - sass
  - scripts
    - init.js
- index.html
- gulpfile.js
- webpack.config.js

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

Итак, вот файл gulpfile, который я сейчас использую:

'use strict';

const browsersync = require("browser-sync").create();
const eslint = require("gulp-eslint");
const gulp = require ('gulp');
const sass = require ('gulp-sass');
const plumber = require("gulp-plumber");
const webpack = require("webpack");
const webpackconfig = require("./webpack.config.js");
const webpackstream = require("webpack-stream");
const sourcemaps = require('gulp-sourcemaps');

function browserSync(done) {
    browsersync.init({
        proxy: "gh-induction.ddev.local"
    });
    done();
}
function browserSyncReload(done) {
    browsersync.reload();
    done();
}

function css() {
    return gulp
        .src("./Resources/sass/**/*.scss")
        .pipe(sourcemaps.init())
        .pipe(plumber())
        .pipe(sass({ outputStyle: "compressed" }))
        .pipe(sourcemaps.write({includeContent: false}))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(gulp.dest("./Resources/css/"))
        // .pipe(rename({ suffix: ".min" }))
        // .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest("./Resources/css/"))
        .pipe(browsersync.stream());
}

function scriptsLint() {
    return gulp
        .src(["./Resources/js/**/*", "./gulpfile.js"])
        .pipe(plumber())
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
}

function scripts() {
    return (
        gulp
            .src(["./Resources/scripts/**/*"])
            .pipe(plumber())
            .pipe(webpackstream(webpackconfig, webpack))
            // folder only, filename is specified in webpack config
            .pipe(gulp.dest("./Resources/js/"))
            .pipe(browsersync.stream())
    );
}

function watchFiles() {
    gulp.watch("./Resources/sass/**/*", css);
    gulp.watch("./Resources/js/**/*", gulp.series(scriptsLint, scripts));
    gulp.watch(
        [
            "./Resources/**/*",
            "*.html"
        ],
        gulp.series(browserSyncReload)
    );
}

const js = gulp.series(scriptsLint, scripts);
const build = gulp.series(gulp.parallel(css, js));
const watch = gulp.parallel(watchFiles, browserSync);

exports.css = css;
exports.js = js;
exports.build = build;
exports.watch = watch;
exports.default = build;

Извините за стену кода, но, поскольку idk, где ошибка, я мог бы также опубликовать весь файл.

Вот webpack.config.js

const path = require('path');

module.exports = {
    entry: './Resources/scripts/init.js',

    output: {
        path: path.resolve('./Resources/js/'),
        filename: 'bundle.js'
    },

    module: {
        rules: [{
            test: /\.js$/,
            use: 'babel-loader'
        },

            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
};

Я не писал этот файл, я использовал этот генератор, чтобы создать его, так как я не знал синтаксис. Кто-нибудь знает, где моя ошибка?

Answer 1

Хорошо. Кажется, я нашел проблему сам.Это была проблема, которую я получил в моем gulpfile.После того, как я отключил его, файл был создан правильно.

Теперь я могу импортировать jQuery и начальную загрузку в один файл вместе со своим собственным кодом, но как я могу импортировать локальные файлы в один и тот же файл?Файлы, которые я хочу импортировать, находятся на том же уровне, что и файл init.js, о котором я упоминал выше.