gulp uglify與明確的js文件名與通配符

Question

我是一個吞食新手。我正在使用VS 2015 Update 3來完成我的項目。對於那個項目，我有幾個使用TypeScript編寫的服務和控制器類。我使用gulp進行排序，concat，uglify通過.ts文件轉譯的角度js文件。這裏服務和控制器文件的順序很重要，所以我在使用「gulp-angular-filesort」配方來連接這些文件之前。我嘗試了2個版本。

對於版本1（見下面的代碼任務被命名爲「分：appcompExp」。），我列出JS文件，以明確在gulpfile.js文件，並將所得的精縮（分鐘）文件工作當我運行我的項目時沒有問題。

對於版本2（見下文碼的任務被命名爲「分：appcompExp2」。），我使用的信息來源的js文件名在gulpfile.js短路碼外卡。但是，生成的縮小（min）文件已創建，但在運行我的項目時它不起作用。該錯誤看起來像依賴注入問題：控制器無法找到其相應的服務DI，但我看到此版本的結果min文件包含其中的所有服務和控制器類。我用ngularFilesort =要求（「吞掉-角的filesort」），但它並沒有幫助2版

一個與第2版使用一飲而盡具體DI錯誤：

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

有人可以請解釋原因使用通配符作爲SOURCE js文件名不兼容gulp？

以下是我gulpfile.js列出2個版本CONCAT和醜化服務以及控制類：

/* 
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]，一飲而盡是閱讀所有使用通配符js的內部app/services/和文件app/controllers/目錄按排序順序。

當您明確列出gulp.src()中的源文件，即["app/services/SessionSrvc.js", "app/services/UtilSrvc.js", app/services/BaseSrvc.js", etc.]時，gulp會按該特定順序讀取這些js文件。

你的"min:appcompExp2"吞嚥任務不起作用的原因是因爲在gulp.src()中使用通配符會擾亂正在被吞嚥處理的js文件的順序。而你的"min:appcompExp"吞噬任務正在工作，因爲你明確列出了它應該處理的順序的JS文件。

我敢打賭，如果你在你的"min:appcompExp"一飲而盡任務修改的參數爲gulp.src()，這樣的JS文件都在有序，它會失敗，你"min:appcompExp2"一飲而盡任務一樣的工作方式：

[ 
"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的不區分大小寫的排序順序。