Search code examples
typescriptgulp

Gulp not making bundle files

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"));    
};
Solution

  • 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.