shama / webpack-stream

:tropical_drink: Run webpack through a stream interface
MIT License
1.39k stars 122 forks source link

webpack-stream finishes after gulp task finishes #206

Closed JacobDB closed 5 years ago

JacobDB commented 5 years ago

I'm trying to only run webpack-stream if gulp-newer detects newer files, while providing custom entry points. Everything I've tried so far has failed, and I think it's because webpack-stream appears to be running out side the normal gulp stream.

As you can see in the screenshot below, my task finishes and then webpack finishes. I could be mistaken, but I think this means that webpack-stream isn't respecting the if conditionals I have set up in my gulp task.

image

How can my task be modified so that webpack-stream only triggers if files exist in the stream after gulp-newer runs?

Full scripts task:

module.exports = {
    scripts(gulp, plugins, ran_tasks, on_error) {
        // task-specific plugins
        const ESLINT  = require("gulp-eslint");
        const GLOB    = require("glob");
        const WEBPACK = require("webpack-stream");

        // scripts task, lints, concatenates, & compresses JS
        return new Promise ((resolve) => {
            // set JS directory
            const JS_DIRECTORY = plugins.argv.dist ? global.settings.paths.dist + "/assets/scripts" : global.settings.paths.dev + "/assets/scripts";

            // set the source directory
            const SOURCE_DIRECTORY = global.settings.paths.src + "/assets/scripts";

            const WEBPACK_CONFIG = {
                mode:   "development",
                entry:  {
                    "critical":       GLOB.sync(SOURCE_DIRECTORY + "/critical/**/*.js"),
                    "legacy":         GLOB.sync(SOURCE_DIRECTORY + "/legacy/**/*.js"),
                    "modern":         GLOB.sync(SOURCE_DIRECTORY + "/modern/**/*.js"),
                    "service-worker": GLOB.sync(SOURCE_DIRECTORY + "/service-worker/**/*.js"),
                },
                output: {
                    path:     plugins.path.resolve(__dirname, JS_DIRECTORY),
                    filename: "[name].js",
                },
            };

            // update webpack config for the current target destination and file name
            WEBPACK_CONFIG.mode = plugins.argv.dist ? "production" : WEBPACK_CONFIG.mode;

            const ALL_FILE_NAMES = plugins.fs.existsSync(JS_DIRECTORY) ? plugins.fs.readdirSync(JS_DIRECTORY) : false;
            let hashed_file_name = ALL_FILE_NAMES.length > 0 && ALL_FILE_NAMES.find((name) => {
                return name.match(new RegExp("[^.]+.[a-z0-9]{8}.js"));
            });

            if (!hashed_file_name) {
                hashed_file_name = "modern.js";
            }

            gulp.src(SOURCE_DIRECTORY + "/**/*.js")
                // prevent breaking on error
                .pipe(plugins.plumber({errorHandler: on_error}))
                // check if source is newer than destination
                .pipe(plugins.gulpif(!plugins.argv.dist, plugins.newer(JS_DIRECTORY + "/" + hashed_file_name)))
                // lint all scripts
                .pipe(ESLINT())
                // print lint errors
                .pipe(ESLINT.format())
                // run webpack
                .pipe(WEBPACK(WEBPACK_CONFIG)) // doesn't respect any conditional I use
                // run webpack only if --dist is passed
                // .pipe(plugins.gulpif(plugins.argv.dist, WEBPACK(WEBPACK_CONFIG))) // always fires, even if `--dist` isn't passed
                // generate a hash and add it to the file name
                .pipe(plugins.hash({template: "<%= name %>.<%= hash %><%= ext %>"}))
                // output scripts to compiled directory
                .pipe(gulp.dest(JS_DIRECTORY))
                // notify that task is complete, if not part of default or watch
                .pipe(plugins.gulpif(gulp.seq.indexOf("scripts") > gulp.seq.indexOf("default"), plugins.notify({
                    title:   "Success!",
                    message: "Scripts task complete!",
                    onLast:  true,
                })))
                // push task to ran_tasks array
                .on("data", () => {
                    if (ran_tasks.indexOf("scripts") < 0) {
                        ran_tasks.push("scripts");
                    }
                })
                // generate a hash manfiest
                .pipe(plugins.hash.manifest(".hashmanifest-scripts", {
                    deleteOld: true,
                    sourceDir: JS_DIRECTORY
                }))
                // output hash manifest in root
                .pipe(gulp.dest("."))
                // resolve the promise on end
                .on("end", () => {
                    resolve();
                });

        });
    }
};
JacobDB commented 5 years ago

Figured out a solution for this by splitting out the "check for newer" functionality and the "process scripts" functionality in to two sub-tasks. Not exactly ideal, but 🤷‍♂️ it works.

https://github.com/JacobDB/new-site/blob/74bfb8dda564d61244ba452697709a868de2b68e/gulp-tasks/scripts.js