gulp uglifyと明示的なjsファイル名とワイルドカードのもの

Question

私は初心者です。私はプロジェクトを行うためにVS 2015 Update 3を使用しています。そのプロジェクトでは、TypeScriptを使って書かれたいくつかのサービスクラスとコントローラクラスがあります。私はgulpを使って、.tsファイルに変換された角度のあるjsファイルを並べ替え、連結し、醜くする。ここではサービスとコントローラファイルの順序が重要なので、それらのファイルを連結する前に "gulp-angular-filesort"レシピを使用します。私は2つのバージョンを試します。バージョン1の場合

（タスクが「分：appcompExp」と命名された以下のコードを参照。）、私はgulpfile.jsファイルで明示的に順序でのjsファイルを一覧表示し、結果、縮小さ（分）ファイルが動作していますプロジェクトを実行するときに問題はありません。バージョン2の場合

（タスクが「分：appcompExp2」と命名された以下のコードを参照してください。）、私はgulpfile.jsでコードを短絡させるためのSOURCEのjsファイル名を一覧表示するためにワイルドカードを使用します。ただし、結果のminified（min）ファイルが作成されますが、プロジェクトを実行すると機能しません。このエラーは、依存性注入の問題のようです：このバージョンの結果のminファイルには、すべてのサービスクラスとコントローラークラスが含まれていますが、コントローラは対応するサービスDIを見つけることができません。誰かが理由を説明していただけます

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

：私は（「飲み込む-角度-filesortレコードを」）ngularFilesortは=必要と使用していますが、それはがぶ飲みを使用してバージョン2の一つの具体的なDIエラー

バージョン2のためには役立ちません。 SOURCE jsファイル名にワイルドカードを使用すると、gulpが機能しません。

/* 
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]、がぶ飲みはすべてを読んでいる中でワイルドカードを使用app/services/と内のファイルをJS：

次

は、サービスと、コントローラクラスをuglify連結の2つのバージョンを示していますし、私のgulpfile.jsです app/controllers/ディレクトリをソート順に表示します。

ソースファイルを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ファイルを明示的にリストしているため、処理する必要があります。

私はJSファイルがソートされているように、あなたの"min:appcompExp"ゴクゴクタスクにgulp.src()のためのパラメータを変更した場合、それはあなたの"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の大文字小文字を区別しない並べ替え順であると仮定します。