2016-09-21 7 views
0

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

(아래 코드를 볼 수있는 작업이 으로 이름이 "분 : 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 


}); 

답변

0

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

+0

각도 의존성 주입 순서를 유지하려면 (서비스가 항상 컨트롤러보다 먼저 나온다) 필자는 꿀꺽 꿀꺽 거리는 파일 분류법을 사용했지만 도움이되지 않습니다. gulpfile.js를 단순하고 관리하기 쉽도록 만들기 위해 와일드 카드가 사용되지만 결과로 생성 된 min js 파일은 실패합니다. 컨트롤러는 정의되지 않은 서비스를받습니다. 그렇다면 버전 2의 문제를 어떻게 해결할 수 있습니까? –

+0

죄송합니다. 분명히 밝히지 않았지만 'var comp = gulp.src ([ "app/services/*. js", "app/controllers/*. js"]) 컨트롤러 전에.문제는'services' 디렉토리에있는 js 파일의 순서와/또는'controllers' 디렉토리에있는 js 파일의 순서에 있다고 생각합니다. 'BaseSrvc.js'와'BaseCtrl.js'가 있음을 알았습니다. 다른 서비스는 BaseSrvc.js를 상속합니까? 다른 컨트롤러는 BaseCtrl.js를 상속합니까? 그렇다면 gulp는 다른 .js 파일을 다른 상속 된 서비스와 컨트롤러보다 먼저 읽어야한다고 생각합니다. 그렇다면 단순히 와일드 카드를 사용할 수 있다고 생각하지 않습니다. – kimbaudi

+0

BaseSrvc는 다른 서비스에 의해 확장되었습니다. UtilSrvc는 다른 서비스에 의해 주입됩니다. BaseCtrl은 셸 페이지 뷰 인 일명 index.html에서만 사용됩니다. –