1

I am unable to get my bundle files created, this was working fine before I tried to upgrade to gulp4 and now that I am back on gulp3. I am not seeing the files in my dist folder. Gulp created the files in the build and temp folder but not in the bundle or App folder. Can I log the task at the end of the createBundleTask is get some type of status? Or is there some better way to trace this out?

task that is not building bundle files

var task = gulp.src(entryPoint)
    .pipe(gulp_jspm({
        selfExecutingBundle: true
    }),true)
    .pipe(rename(packageId + ".bundle.js"))
    .pipe(gulp.dest(paths.dist + "/bundle"));

gulp file

var gulp = require("gulp");
var runSequence = require("run-sequence");
var tslint = require("gulp-tslint");
var typedoc = require("gulp-typedoc");
var superstatic = require("superstatic");
var shell = require("gulp-shell");
var typescript = require("gulp-typescript");
var tsProject = typescript.createProject("tsconfig.json");
var sourcemaps = require("gulp-sourcemaps");
var rimraf = require("gulp-rimraf");
var replace = require("gulp-replace");
var rename = require("gulp-rename");
var ignore = require("gulp-ignore");
var insert = require("gulp-insert");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var tslintStylish = require("gulp-tslint-stylish");
var util = require("gulp-util");
var commentSwap = require("gulp-comment-swap");
var tsc = require("gulp-typescript");
var gulp_jspm = require("gulp-jspm");
var inlineNg2Template = require("gulp-inline-ng2-template");

/**
 * Typescript configuration 
 **/
var paths = {
    dist: "./dist",    
    sources: "./App/**/*.ts"    
};

gulp.task("prod", function (callback) {
    runSequence(
        "compile",
        "bundle",
        "min",
        function (error) {
            if (error) {
                console.log(error.message);
            } else {
                console.log("Production build finished successfully");
            }
            callback(error);
        });
});

/**
 * Compile TypeScript sources
 */
gulp.task("compile", ["clean"], function () {
    return gulp.src("./App/**/*.ts")
        .pipe(inlineNg2Template({
            base: "/",                  // Angular2 application base folder
            target: "es6",              // Can swap to es5
            indent: 2,                  // Indentation (spaces)
            useRelativePaths: false,     // Use components relative assset paths
            removeLineBreaks: false,     // Content will be included as one line
            templateExtension: ".html", // Update according to your file extension
            templateFunction: false    // If using a function instead of a string for `templateUrl`, pass a reference to that function here
        }))
        .pipe(tsProject())
        .pipe(ignore("References.js"))
        .pipe(gulp.dest("dist/App"));
});

/**
 * Bundle application parts
 */
gulp.task("bundle:template", function () {
    return createBundleTask(paths.dist + "/App/Pages/TemplateEdit.js", "template");
});

gulp.task("bundle:agents", function () {
    return createBundleTask(paths.dist + "/App/Pages/Maintenance/Agents.js", "agents");
});

gulp.task("bundle:indications", function () {
    return createBundleTask(paths.dist + "/App/Pages/Maintenance/Indications.js", "indications");
});

gulp.task("bundle:styleguidenotes", function () {
    return createBundleTask(paths.dist + "/App/Components/NoteEditor/NoteEditor.js", "styleguidenotes");
});

gulp.task("bundle:dynamicdictionary", function () {
    return createBundleTask(paths.dist + "/App/Pages/Maintenance/DynamicDictionary.js", "dynamicdictionary");
});

gulp.task("bundle:splitdynamicdictionary", function () {
    return createBundleTask(paths.dist + "/App/Pages/Maintenance/SplitDynamicDictionary.js", "splitdynamicdictionary");
});

gulp.task("bundle:styleguidenotesdevprocess", function () {
    return createBundleTask(paths.dist + "/App/Pages/StyleGuideNote/Index.js", "styleguidenotesdevprocess");
});

gulp.task("bundle:scheduling", function () {
    return createBundleTask(paths.dist + "/App/Pages/Scheduling/Index.js", "scheduling");
});

gulp.task("bundle:templatesmanagement", function () {
    return createBundleTask(paths.dist + "/App/Pages/TemplatesManagement/Index.js", "templatesmanagement");
});

gulp.task("bundle:review", function () {
    return createBundleTask(paths.dist + "/App/Pages/Review/Index.js", "review");
});

gulp.task("bundle:ownedreview", function () {
    return createBundleTask(paths.dist + "/App/Pages/OwnedReview/Index.js", "ownedreview");
});

gulp.task("bundle:pdfqueue", function () {
    return createBundleTask(paths.dist + "/App/Pages/PdfQueue/Index.js", "pdfqueue");
});

gulp.task("bundle:admin", function () {
    return createBundleTask(paths.dist + "/App/Pages/Admin/Index.js", "admin");
});


gulp.task("bundle", function (callback) {
    runSequence(
        "bundle:template",
        "bundle:agents",
        "bundle:indications",
        "bundle:styleguidenotes",        
        "bundle:dynamicdictionary",
        "bundle:splitdynamicdictionary",
        "bundle:styleguidenotesdevprocess",
        "bundle:scheduling",
        "bundle:templatesmanagement",
        "bundle:review",
        "bundle:ownedreview",
        "bundle:pdfqueue",
        "bundle:admin",
        function (error) {
            if (error) {
                console.log(error.message);
            } else {
                console.log("Bundling finished successfully");
            }
            callback(error);
        });
});

/**
 * Create application package
 */
gulp.task("min:template", function () {
    return createProductionPackageTask("template", true);
});

gulp.task("min:agents", function () {
    return createProductionPackageTask("agents", false);
});

gulp.task("min:indications", function () {
    return createProductionPackageTask("indications", false);
});

gulp.task("min:styleguidenotes", function () {
    return createProductionPackageTask("styleguidenotes", false);
});

gulp.task("min:dynamicdictionary", function () {
    return createProductionPackageTask("dynamicdictionary", false);
});

gulp.task("min:splitdynamicdictionary", function () {
    return createProductionPackageTask("splitdynamicdictionary", false);
});

gulp.task("min:styleguidenotesdevprocess", function () {
    return createProductionPackageTask("styleguidenotesdevprocess", false);
});

gulp.task("min:scheduling", function () {
    return createProductionPackageTask("scheduling", false);
});


gulp.task("min:templatesmanagement", function () {
    return createProductionPackageTask("templatesmanagement", false);
});

gulp.task("min:review", function () {
    return createProductionPackageTask("review", false);
});

gulp.task("min:ownedreview", function () {
    return createProductionPackageTask("ownedreview", false);
});

gulp.task("min:pdfqueue", function () {
    return createProductionPackageTask("pdfqueue", false);
});
gulp.task("min:admin", function () {
    return createProductionPackageTask("admin", false);
});

gulp.task("min", function (callback) {
    runSequence(
        "min:template",
        "min:agents",
        "min:indications",
        "min:styleguidenotes",        
        "min:dynamicdictionary",
        "min:splitdynamicdictionary",
        "min:styleguidenotesdevprocess",
        "min:scheduling",
        "min:templatesmanagement",
        "min:review",
        "min:ownedreview",
        "min:pdfqueue",
        "min:admin",
        function (error) {
            if (error) {
                console.log(error.message);
            } else {
                console.log("Minification finished successfully");
            }
            callback(error);
        });
});

/**
 * Clean build folder
 */
gulp.task("clean", function () {
    return gulp.src(paths.dist, { read: false }).pipe(rimraf({ force: true }));
});

/**
 * Helper methods
 */
var createBundleTask = function (entryPoint, packageId) {
    if (typeof entryPoint === "undefined") {
        throw "ArgumentNullException: entryPoint";
    }

    if (typeof packageId === "undefined") {
        throw "ArgumentNullException: packageId";
    }

    var task = gulp.src(entryPoint)
        .pipe(gulp_jspm({ selfExecutingBundle: true }))
        .pipe(rename(packageId + ".bundle.js"))
        .pipe(gulp.dest(paths.dist + "/bundle"));

    return task;
};

var createProductionPackageTask = function (packageId, uglifyDestination) {
    if (typeof packageId === "undefined") {
        throw "ArgumentNullException: packageId";
    }

    var filesArry = [
        "./node_modules/core-js/client/shim.min.js",
        "./node_modules/zone.js/dist/zone.js",
        "./node_modules/reflect-metadata/Reflect.js",
        paths.dist + "/bundle/" + packageId + ".bundle.js"
    ];

    var task = gulp.src(filesArry)
        .pipe(concat(packageId + "_concatApp.js"))
        .pipe(gulp.dest(paths.dist + "/temp"))
        .pipe(rename(packageId + ".bundle.min.js"));



    if (uglifyDestination) {
        task = task.pipe(uglify({ mangle: false }));
    }

    return task.pipe(gulp.dest(paths.dist + "/build"));    
};
Jefferson
  • 71
  • 3
  • 12

1 Answers1

2

Gulp 4 removed the 3-arguments syntax for gulp.task, as mentioned in the changelog.

This means dependency tasks should now be handled differently, using the two new functions:

  • gulp.series()
  • gulp.parallel()

You can read more about this breaking change in this migration guide.

So you have 2 changes to make:

  1. Currently, in your gulp file you have this task:

    gulp.task("compile", ["clean"], function () {
    ...
});

    So you must change it to:

    gulp.task('compile', gulp.series('clean', function() {
   ...
}));

  2. Similairly, you must replace runSequence with task.series or task.parallel (only you know if those tasks must run serially or in parallel).

    Another option is to update the Gulp 3-compatible package run-sequence which you currently use to the Gulp 4-compatible package gulp4-run-sequence.

OfirD
  • 9,442
  • 5
  • 47
  • 90
  • so with Gulp3 i can use this run-sequence form gulp 4 to correct the bundle ? – Jefferson Apr 21 '22 at 14:02
  • when I install `+ gulp4-run-sequence@1.0.1` I am then seeing this `Error: Cannot find module 'typedoc'` – Jefferson Apr 21 '22 at 14:05
  • @Jefferson, this is unrelated to `gulp4-run-sequence` itself, because it actually has no dependencies. I've just run `npm i gulp4-run-sequence` on my machine, and it installed without errors. Maybe try to first uninstall `run-sequence` (the previous version), and then try to reinstall `gulp4-run-sequence`. If it doesn't help, you probably have some module which require `typedoc`, so just go through the usual ways to resolve it ([maybe this would help](https://stackoverflow.com/questions/9023672/how-do-i-resolve-cannot-find-module-error-using-node-js)). – OfirD Apr 21 '22 at 15:10
  • @Jefferson, regardless, as mentioned in my answer, you can completely remove `runSequence` and replace it with `task.series` or `task.parallel`. – OfirD Apr 21 '22 at 15:11
  • is there a way I can log that `.pipe(gulp.dest(paths.dist + "/bundle"));` I would like to see an error? – Jefferson Apr 25 '22 at 17:27
  • @Jefferson you can log the error by using `.on('error', function (err) { console.error(err.message); })` after the `.pipe()`. You can also listen to all other [stream events](https://nodejs.org/api/stream.html#stream_events_finish_and_end). see also this [related thread](https://stackoverflow.com/questions/27975129/console-log-to-stdout-on-gulp-events). – OfirD Apr 25 '22 at 18:01