Gulp不使用webpack，找不到错误

Question

目前我正在尝试将gulp.js实现到我的项目中。 我对此很陌生，没有经验。 我之前使用过JavaScript但是我远没有专家。

我已经用这个例子来编写我的gulpfile但是我的脚本似乎有些错误（我猜错误是在我的webpack.config.js中？）。 SCSS编译和browsersync工作正常。

所以这就是我想要做的：

我希望scripts块做的第一件事是从我的节点模块导入jQuery和bootstrap，而不是导入我脚本目录中的每个文件，然后从所有这些文件中写入一个缩小的文件。

我的文件夹结构如下所示：

- 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中的eslint-part。 禁用后，文件创建正确。

我现在可以将jQuery和bootstrap与我自己的代码一起导入到一个文件中，但是如何将本地文件导入到同一个文件中呢？ 我要导入的文件与我上面提到的init.js文件处于同一级别。