gulp icon indicating copy to clipboard operation
gulp copied to clipboard

Upgrade from Gulp 4.0.2 to 5.0.0 with Node V20-LTS is missing bundled js files

Open Svenmarim opened this issue 1 year ago • 6 comments

What were you expecting to happen?

After running Gulp on my project, to have 22 files within the wwwroot/dist/js/bundles folder.

What actually happened?

I only have 19 files.

Please give us a sample of your gulpfile

const {
    src,
    dest,
    series,
    parallel
} = require("gulp");
const gulpif = require("gulp-if");
const babel = require("gulp-babel");
const sourcemaps = require("gulp-sourcemaps");
const concat = require("gulp-concat");
const del = require("del");
const merge = require("merge-stream");
var sass = require("gulp-dart-sass");
const cleanCSS = require('gulp-clean-css');
const babelConfig = require("./babelrc.json");
var flatten = require('gulp-flatten');

const config = require("./bundle.config");

var launch = require('./Properties/launchSettings.json');

const environment = launch.profiles.Backoffice.environmentVariables.ASPNETCORE_ENVIRONMENT || 'Production';

function bundleJs() {
    bundles = config.scripts.bundles
        .filter(item => item.bundleName && item.inputFiles.length > 0)
        .map(item => src(item.inputFiles, { base: "." })
            .pipe(gulpif(environment === 'Development', sourcemaps.init()))
            .pipe(babel(babelConfig))
            .pipe(concat(`bundles/${item.bundleName}`))
            .pipe(gulpif(environment === 'Development', sourcemaps.write(".")))
        .pipe(gulpif(item.flatten, flatten(item.flatten)))
        .pipe(dest(config.scripts.dist)));

    return merge([bundles]);
}

function bundleCss() {
    bundles = config.css.bundles
        .filter(item => item.bundleName && item.inputFiles.length > 0)
        .map(item => src(item.inputFiles, { base: "." })
            .pipe(gulpif(environment === 'Development', sourcemaps.init()))
            .pipe(cleanCSS({
                compatibility: 'ie9',
                level: {
                    1: {
                        specialComments: 0
                    }
                }
            }))
            .pipe(concat(`bundles/${item.bundleName}`))
            .pipe(gulpif(environment === 'Development', sourcemaps.write(".")))
        .pipe(gulpif(item.flatten, flatten(item.flatten)))
        .pipe(dest(config.css.dist)));

    return merge([bundles]);
}

function bundleScss() {
    css = src(config.scss.src)
        .pipe(sourcemaps.init())
        .pipe(sass()).on("error", sass.logError)
        .pipe(sourcemaps.write("."))
        .pipe(dest(config.scss.dest));

    return css;
}

function copyAssets() {
    bundles = config.assets.bundles
        .filter(item => item.inputFiles.length > 0)
        .map(item => src(item.inputFiles, { base: "." })
            .pipe(gulpif(environment === 'Development', sourcemaps.write(".")))
            .pipe(flatten({ includeParents: -1 } ))
            .pipe(dest(config.css.dist)));
          

    return merge([bundles]);
}

function copyVendors() {
    bundles = config.vendors.bundles
        .filter(item => item.inputFiles.length > 0)
        .map(item => src(item.inputFiles, { base: '.' })
            .pipe(flatten(item.flatten))
            .pipe(dest(`${config.vendors.dist}`)));

    return merge([bundles]);
}

function clean() {
    return del(["./wwwroot/dist/**"]);
};

/* Exposed tasks */

exports.clean = clean;
exports.bundleJs = bundleJs;
exports.bundleCss = bundleCss;
exports.bundleScss = bundleScss;
exports.copyAssets = copyAssets;
exports.copyVendors = copyVendors;

exports.default = series(
    exports.clean,
    exports.bundleScss,
    parallel(exports.bundleJs, exports.bundleCss, exports.copyAssets, exports.copyVendors));

Terminal output / screenshots

C:\Repos\Client-Backoffice\Backoffice> cmd.exe /c gulp -b "C:\Repos\Client-Backoffice\Backoffice" --color --gulpfile "C:/Repos/Client-Backoffice/Backoffice/Gulpfile.js" default
[09:51:05] Using gulpfile C:\Repos\Client-Backoffice\Backoffice\Gulpfile.js
09:51:05] Starting '09:51:05] Starting '[default'...
[clean'...
clean' after [09:51:05] Finished '61 ms
09:51:05] Starting '[bundleScss'...
bundleScss' after [09:51:08] Finished '3.05 s
09:51:08] Starting '09:51:08] Starting '09:51:08] Starting '09:51:08] Starting '[bundleJs'...
[bundleCss'...
[copyAssets'...
[copyVendors'...
WARNING (@babel/preset-env): The `corejs` option only has an effect when the `useBuiltIns` option is not `false`
[09:51:13] Finished 'copyVendors' after 4.46 s
09:51:13] Finished '4.55 s
[bundleCss' after bundleJs' after [09:51:13] Finished '4.65 s
09:51:13] Finished '4.81 s
[copyAssets' after default' after [09:51:13] Finished '7.92 s
Process terminated with code 0.

Please provide the following information:

  • OS & version [e.g. MacOS Catalina 10.15.4]: Windows
  • node version (run node -v): 20.14.0
  • npm version (run npm -v): 10.7.0
  • gulp version (run gulp -v): 5.0.0

Additional information

Missing application.min.js, application.min.js.map and jquery.vlidation.bundle.min.js

Svenmarim avatar Jun 03 '24 07:06 Svenmarim

Something similar happened to me. I found out that the package that contained the files had updated its version in my package.lock, and the bundled files location too.

lik3as avatar Jun 24 '24 15:06 lik3as

i have the same issue its copy part of files.

its like a no resolved async task

emimoun2 avatar Jun 24 '24 16:06 emimoun2

@Svenmarim unfortunately the core team doesn't have the capacity to debug your entire gulpfile. If you can reduce this to a simple case, we'd be more able to help. Otherwise, I can transfer this to a GitHub Discussion for you to get some community support.

phated avatar Jun 24 '24 16:06 phated

I believe this was related to https://github.com/gulpjs/glob-stream/pull/136 which we've fixed in https://github.com/gulpjs/gulp/pull/2839 and released as gulp v5.0.1

Can you please upgrade and test it out?

phated avatar Jun 01 '25 21:06 phated

I am using v5.0.1 and so getting this behaviour. Like @Svenmarim I am also is using "merge".

Edit: Checked AI and its suggestion worked for me.


Gulp 5 has introduced changes to how streams are handled, leading to potential issues with existing plugins, particularly those relying on merge-stream. The primary change is the switch from node:stream to streamx, which can cause uncaught exceptions during piping and breaks some plugins that worked in Gulp 4. Additionally, Gulp 5 defaults to UTF-8 encoding for streams, which can break handling of binary files like images if not handled correctly. Here's a breakdown of the issues and solutions:

  1. merge-stream Compatibility Issues: merge-stream is no longer maintained and doesn't work well with Gulp 5. The recommended replacement is ordered-read-streams, which offers the same API as merge-stream. Solution: Replace require('merge-stream') with require('ordered-read-streams') and update your installation to include ordered-read-streams.

VismaTobbe avatar Jul 11 '25 08:07 VismaTobbe

Also found this on the issue with merge-stream: https://github.com/grncdr/merge-stream/issues/42

VismaTobbe avatar Jul 11 '25 09:07 VismaTobbe