使用显式的js文件名vs.通配符文件名

Question

我是个大口大口的新手。我使用VS 2015 Update 3来做我的项目。对于这个项目，我有几个使用TypeScript编写的服务和控制器类。我使用gulp来对那些由。ts文件编译的angular js文件进行排序、连接和丑化。这里，服务和控制器文件的顺序很重要，所以我在连接这些文件之前使用了"gulp-angular-filesort"配方。我尝试了两个版本。

版本1(参见下面的代码)。任务被命名为"min:appcompExp")，我在gulpfile.js文件中明确地按顺序列出js文件，结果最小化(min)文件正在工作，当我运行我的项目时没有问题。

用于版本2(参见下面的代码)。任务被命名为"min:appcompExp2")，我使用通配符列出SOURCE js文件名，以便在gulpfile.js中缩短代码。然而，结果最小化(最小)文件被创建，但它不工作，当我运行我的项目。这个错误看起来像依赖注入问题:控制器找不到相应的服务DI，尽管我看到这个版本的结果最小文件包含了所有的服务和控制器类。我使用ngularFilesort = require("gulp-angular-filesort")，但它对版本2没有帮助。

版本2使用gulp时的一个特定DI错误:

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

有人可以解释为什么使用通配符为源js文件名不工作与gulp?

下面是我的gulpfile.js，其中列出了concat和uglify服务和控制器类的两个版本:

/*
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

});

Answer 1

当你在gulp.src()即["app/services/*.js", "app/controllers/*.js]中使用通配符时，gulp正在按顺序读取app/services/和app/controllers/目录内的所有js文件。

当你显式列出gulp.src()即["app/services/SessionSrvc.js", "app/services/UtilSrvc.js", app/services/BaseSrvc.js", etc.]中的源文件时，gulp将按照特定的顺序读取这些js文件。

你的"min:appcompExp2" gulp任务不工作的原因是因为gulp.src()中通配符的使用扰乱了gulp处理的js文件的顺序。而你的"min:appcompExp" gulp任务是工作的，因为你显式地列出了js文件的顺序，它应该被处理。

我敢打赌，如果你在"min:appcompExp" gulp任务中修改了gulp.src()的参数，以便js文件按顺序排序，它会像你的"min:appcompExp2" gulp任务一样失败:

[
"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",
]

我假设它是presidentsSrvc.js的不区分大小写的排序顺序。