명시 적 js 파일 이름과 꿀꺽 꿀꺽 (와일드 카드 것보다)

Question

나는 멍청이이다. 내 프로젝트를 수행하기 위해 VS 2015 Update 3을 사용하고 있습니다. 이 프로젝트에는 TypeScript를 사용하여 작성된 여러 가지 서비스 및 컨트롤러 클래스가 있습니다. 나는 꿀벌을 사용하여 .ts 파일에 의해 변환 된 각도 js 파일을 정렬, 연결, 위그 리킹합니다. 여기서 서비스 및 컨트롤러 파일의 순서는 중요하므로 이러한 파일을 연결하기 전에 "gulp-angular-filesort"레서피를 사용합니다. 나는 2 개의 버전을 시험해 본다. 버전 1에 대한

(아래 코드를 볼 수있는 작업이 으로 이름이 "분 : appcompExp".), I는, 명시 적으로 gulpfile.js 파일에 위해 JS 파일을 나열하고 결과 축소 된 (분) 파일이 작동됩니다 프로젝트를 실행할 때 아무런 문제가 없습니다. 버전 2에 대한

(아래 코드를 볼 수있는 작업이 "분 : appcompExp2"로 지정됩니다.), 나는 gulpfile.js에 코드를 단락의 소스 JS 파일 이름을 나열하는 와일드 카드를 사용합니다. 그러나 결과 minified (min) 파일이 만들어 지지만 프로젝트를 실행할 때 작동하지 않습니다. 이 오류는 종속성 삽입 문제처럼 보입니다.이 버전의 결과 파일이 모든 서비스 및 컨트롤러 클래스를 포함하고 있음에도 불구하고 컨트롤러는 해당 서비스 DI를 찾을 수 없습니다.

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

누군가가 이유를 설명시겠습니까 : 버전 2에 대한

한 버전 2가 꿀꺽를 사용과 특정 DI 에러 나는 ngularFilesort이 = ("꿀꺽 - 각도 - filesort")를 필요로 사용하지만, 그것은 도움이되지 않습니다 SOURCE js 파일 이름에 대해 와일드 카드를 사용하면 꿀꺽 꿀꺽 거리는 소리가 들리지 않습니다.

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

다음

서비스와 컨트롤러 클래스를 추하게 CONCAT의 두 버전을 나열하고 내 gulpfile.js입니다 app/controllers/ 디렉토리가 정렬 된 순서로 표시됩니다.

gulp.src()에 명시 적으로 소스 파일을 나열하면 ["app/services/SessionSrvc.js", "app/services/UtilSrvc.js", app/services/BaseSrvc.js", etc.], gulp는 해당 특정 순서로 js 파일을 읽습니다.

"min:appcompExp2" 덤프 작업이 작동하지 않는 이유는 gulp.src()에서 와일드 카드를 사용하면 꿀꺽 꿀꺽 거리는 소리로 처리되는 js 파일의 순서가 엉망이기 때문입니다.gulp 작업은 명시 적으로 js 파일을 순서대로 나열하기 때문에 작동하는 반면 처리해야합니다.

파일을 정렬 된 순서에있는 JS, 그것은 당신의 "min:appcompExp2" 꿀꺽 작업이했던 것과 같은 방식으로 실패 할 수 있도록 당신이 당신의 "min:appcompExp" 꿀꺽 작업에 gulp.src()의 매개 변수를 수정 한 경우 내가 내기 :

[ 
"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에 대해 대소 문자를 구분하지 않는 정렬 순서라고 가정합니다.