gulp uglify with explicit js file names vs. wildcard ones

Question

I am a gulp newbie. I am using VS 2015 Update 3 to do my project. For that project, I have several service and controller classes that are written using TypeScript. I use gulp to sort, concat, uglify those angular js files that are transpiled by .ts files. Here the orders of service and controller files are important so I use "gulp-angular-filesort" recipe before concatenating those files. I try 2 versions.

For version 1 (see codes below. The task is named as "min:appcompExp"), I list js files in order explicitly in the gulpfile.js file, and the resulted minified (min) file is working and there is no problem when I run my project.

For version 2 (see codes below. The task is named as "min:appcompExp2"), I use wild cards for listing SOURCE js file names for shorting codes in the gulpfile.js. However, the resulted minified (min) file is created but it it not working when I run my project. The error looks like dependency injection issue: controllers cannot find their corresponding service DI although I see the resulted min file for this version contains all service and controller classes in it. I use ngularFilesort = require("gulp-angular-filesort"), but it does not help for Version 2.

One specific DI error with Version 2 using gulp:

Error: $injector:unpr
Unknown Provider
Unknown provider: ContactSrvcProvider <- ContactSrvc <- ContactCtrl

Can somebody please explain why using wild cards for SOURCE js file names is not working with gulp?

The following is my gulpfile.js that lists 2 versions of concat and uglify service and controller classes:

/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require("gulp"),
    inject = require("gulp-inject"),
    concat = require("gulp-concat"),
    print = require("gulp-print"),
    angularFilesort = require("gulp-angular-filesort"),
    uglify = require("gulp-uglify"),
    rimraf = require("rimraf"); 


// concatenated/bundled files 

// vendor js scripts
var pathsCssSrc = "./bower_components/bootstrap/dist/css/*.min.css";
var pathsNglibSrc = [
    "./bower_components/angular/angular.min.js",
    "./bower_components/angular-route/angular-route.min.js",
    "./bower_components/jquery/dist/jquery.min.js", // must before "bootstrap.min.js"
    "./bower_components/bootstrap/dist/js/bootstrap.min.js"
];

var pathsAppmoduleSrc = [
    "./app/app.js",
    "./app/Constants/Constants.js",
    "./app/routes.js",
    "./app/models/*.js"
];


// destinations
var pathsDest = { build: ".build/", subspa : "spa/", indexfile : "./index.html" };

pathsDest.cssDest = pathsDest.build + "css/appStyles.min.css";
pathsDest.nglibDest = pathsDest.build + "nglib/nglib.min.js";
pathsDest.appModuleDest = pathsDest.build + pathsDest.subspa + "app.min.js";


// tasks
....



////// services, controllers

gulp.task("min:appcompExp", function () {

// I explictly list ALL of js file names and their orders of js file names are important.
// The resulted min js file working when I run my project.

    var target = gulp.src(pathsDest.indexfile); // important: root folder must be specified before file name "index.html"

    var comp = gulp.src([ "app/services/SessionSrvc.js",
                        "app/services/UtilSrvc.js",
                        "app/services/BaseSrvc.js",
                        "app/services/ContactSrvc.js",
                        "app/services/AvatarSrvc.js",
                        "app/services/LoginSrvc.js",
                        "app/services/RegisterSrvc.js",
                        "app/services/presidentsSrvc.js",

                        "app/controllers/BaseCtrl.js",

                        "app/controllers/LoginCtrl.js",
                        "app/controllers/LogoutCtrl.js",
                        "app/controllers/RegisterCtrl.js",
                        "app/controllers/PresidentCtrl.js",
                        "app/controllers/PresidentDetailCtrl.js",
                        "app/controllers/ContactCtrl.js",
                        "app/controllers/AvatarCtrl.js"]);

    var dest = ".build/spa/appcomp.min.js";


    return target
    .pipe(inject(comp
        .pipe(print())
        .pipe(concat(dest))
        .pipe(angularFilesort())
        .pipe(uglify()) // Minifies the concatenated js file.
        .pipe(gulp.dest(".")) // important: otherwise there is no files stored
        , { name: "appcomp" }))
    .pipe(gulp.dest("./")); // important: root folder must be specified like so


});


//////////////////////////// 

gulp.task("min:appcompExp2", function () {
// using wild cards for SOURCE js codes for shorting codes
// I got runtime error when running my project: DI problem - controllers cannot find their service classes.

    var target = gulp.src(pathsDest.indexfile); // important: root folder must be specified before file name "index.html"

    var comp = gulp.src(["app/services/*.js",
                        "app/controllers/*.js"]);

    var dest = ".build/spa/appcomp.min.js";


    return target
        .pipe(inject(comp
            .pipe(print())
            .pipe(concat(dest))
            .pipe(angularFilesort()) // this does not help though
            .pipe(uglify()) // Minifies the concatenated js file.
            .pipe(gulp.dest(".")) // important: otherwise there is no files stored
            , { name: "appcomp" }))
        .pipe(gulp.dest("./")); // important: root folder must be specified like so


});

kimbaudi kimbaudi · Accepted Answer · 2016-09-21T19:03:00

When you use wildcards in your gulp.src() i.e. ["app/services/*.js", "app/controllers/*.js], gulp is reading all js files inside app/services/ and app/controllers/ directory in sorted order.

When you explicitly list the source files in gulp.src() i.e. ["app/services/SessionSrvc.js", "app/services/UtilSrvc.js", app/services/BaseSrvc.js", etc.], gulp reads those js files in that particular order.

The reason why your "min:appcompExp2" gulp task is not working is because the use of wildcards in gulp.src() is messing the order of js files being processed by gulp. Whereas your "min:appcompExp" gulp task is working because you are explicitly listing the js files in the order it should be processed.

I bet if you modified the parameter for gulp.src() in your "min:appcompExp" gulp task so that the js files are in sorted order, it would fail the same way that your "min:appcompExp2" gulp task did:

[
"app/services/AvatarSrvc.js",
"app/services/BaseSrvc.js",
"app/services/ContactSrvc.js",
"app/services/LoginSrvc.js",
"app/services/SessionSrvc.js",
"app/services/UtilSrvc.js",
"app/services/presidentsSrvc.js",
"app/services/RegisterSrvc.js",

"app/controllers/AvatarCtrl.js"
"app/controllers/BaseCtrl.js",
"app/controllers/ContactCtrl.js",
"app/controllers/LoginCtrl.js",
"app/controllers/LogoutCtrl.js",
"app/controllers/PresidentCtrl.js",
"app/controllers/PresidentDetailCtrl.js",
"app/controllers/RegisterCtrl.js",
]

I am assuming that it is a case-insensitive sorted order for presidentsSrvc.js.

gulp uglify with explicit js file names vs. wildcard ones

1 Answers