Gulp不使用webpack，找不到错误

Question

currently I'm trying to implement gulp.js into my project. I'm relativly new to this and have no experience in gulp. I've used JavaScript before but I'm far away from beeing an expert.

I've used this example to write my gulpfile but somethings seems to be wrong with my scripts (I'm guessing the error is in my webpack.config.js?). SCSS compiling and browsersync works fine.

So this is what I'm trying to do:

The first thing I want the scripts block to do is import jQuery and bootstrap from my node modules, than import every file inside my scripts directory and then write one minified file from all of that.

My folder structure looks like this:

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

I don't know if I'm using the right libraries for this task, feel free to correct me where every I might be wrong.

So here is the gulpfile I'm using right now:

'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;

Sorry for the wall of code but since idk where the error is I might as well post the whole file.

Here's the 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']
            }
        ]
    }
};

I didn't write this file, I've used this generator to create it since I didn't know the syntax. Does anyone know where my error is?

Answer 1

Okay It seems like I've found the problem by myself. The was the issue the eslint-part in my gulpfile. After I disabled it the file was created correct.

I can now import jQuery and bootstrap into one file together with my own code but how can I import local files into the same one? The files I want to import are at the same level as the init.js file I mentioned above.