나는 멍청이이다. 내 프로젝트를 수행하기 위해 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
});
각도 의존성 주입 순서를 유지하려면 (서비스가 항상 컨트롤러보다 먼저 나온다) 필자는 꿀꺽 꿀꺽 거리는 파일 분류법을 사용했지만 도움이되지 않습니다. gulpfile.js를 단순하고 관리하기 쉽도록 만들기 위해 와일드 카드가 사용되지만 결과로 생성 된 min js 파일은 실패합니다. 컨트롤러는 정의되지 않은 서비스를받습니다. 그렇다면 버전 2의 문제를 어떻게 해결할 수 있습니까? –
죄송합니다. 분명히 밝히지 않았지만 '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
BaseSrvc는 다른 서비스에 의해 확장되었습니다. UtilSrvc는 다른 서비스에 의해 주입됩니다. BaseCtrl은 셸 페이지 뷰 인 일명 index.html에서만 사용됩니다. –