gulp uglify с явными именами файлов js по сравнению с подстановочными знаками

Я новичок в глотке. Я использую VS 2015 Update 3 для своего проекта. Для этого проекта у меня есть несколько классов служб и контроллеров, написанных с использованием TypeScript. Я использую gulp для сортировки, объединения, удаления угловых js-файлов, которые транспилируются файлами .ts. Здесь важен порядок файлов службы и контроллера, поэтому я использую рецепт «gulp-angular-filesort» перед объединением этих файлов. Пробую 2 версии.

Для версии 1 (см. коды ниже. Задача называется "min:appcompExp"), я перечисляю файлы js по порядку явно в файле gulpfile.js, и полученный минимизированный (минимальный) файл имеет вид работает, и нет никаких проблем, когда я запускаю свой проект.

Для версии 2 (см. коды ниже. Задача называется "min:appcompExp2") я использую подстановочные знаки для перечисления имен файлов SOURCE js для сокращения кодов в gulpfile.js. Однако полученный минимизированный (минимальный) файл создается, но он не работает, когда я запускаю свой проект. Ошибка выглядит как проблема с внедрением зависимостей: контроллеры не могут найти соответствующий DI службы, хотя я вижу, что полученный файл min для этой версии содержит все классы службы и контроллера. Я использую ngularFilesort = require("gulp-angular-filesort"), но это не помогает для версии 2.

Одна конкретная ошибка DI с версией 2 с использованием gulp:

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

Может кто-нибудь объяснить, почему использование подстановочных знаков для имен файлов SOURCE js не работает с gulp?

Ниже приведен мой gulpfile.js, в котором перечислены 2 версии классов обслуживания и контроллера concat и uglify:

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


});

person Thomas.Benz    schedule 21.09.2016    source источник


Ответы (1)


Когда вы используете подстановочные знаки в своем gulp.src(), то есть ["app/services/*.js", "app/controllers/*.js], gulp читает все файлы 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 не работает, заключается в том, что использование подстановочных знаков в gulp.src() нарушает порядок js-файлов, обрабатываемых gulp. Принимая во внимание, что ваша задача "min:appcompExp" gulp работает, потому что вы явно перечисляете файлы js в том порядке, в котором они должны обрабатываться.

Бьюсь об заклад, если вы изменили параметр для gulp.src() в своей задаче "min:appcompExp" gulp так, чтобы файлы js были в отсортированном порядке, она потерпит неудачу так же, как ваша задача "min:appcompExp2" gulp:

[
"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.

person kimbaudi    schedule 21.09.2016
comment
поэтому, чтобы поддерживать порядок инъекций зависимостей Angular (сервисы всегда идут перед контроллерами), я использовал рецепт gulp-angular-filesort, но это не помогает. Чтобы сделать gulpfile.js простым и удобным в сопровождении, используются подстановочные знаки, но полученный файл min js не удался. Контроллеры получают неопределенные службы. Итак, как я могу решить проблему для версии 2? - person Thomas.Benz; 21.09.2016
comment
Извините, если я неясно выразился, но я считаю, что var comp = gulp.src(["app/services/*.js", "app/controllers/*.js"]); читает все службы перед контроллерами. Я думаю, что проблема заключается в упорядочении файлов js в каталоге services и/или упорядочении файлов js в каталоге controllers. Я заметил, что есть BaseSrvc.js и BaseCtrl.js. Наследуют ли другие службы BaseSrvc.js? И наследуют ли другие контроллеры BaseCtrl.js? Если это так, я считаю, что gulp должен читать эти файлы .js перед другими унаследованными службами и контроллерами. Если это так, я не думаю, что вы можете просто использовать подстановочные знаки. - person kimbaudi; 21.09.2016
comment
BaseSrvc расширяется другими службами. UtilSrvc внедряется другими службами. BaseCtrl используется только представлением страницы оболочки, также известным как index.html. - person Thomas.Benz; 21.09.2016
comment
Я могу ошибаться, но задача "min:appcompExp" gulp работает, потому что вы ставите службы UtilSrvc.js и BaseSrvc.js перед другими службами и потому что вы ставите контроллер BaseCtrl.js перед другими контроллерами. - person kimbaudi; 21.09.2016
comment
Спасибо. Версия 1 Я явно перечисляю js-файлы, как они были в файле index.html, используя src тегов сценария, прежде чем перемещать их в gulpfile.js. Я предпочитаю использовать подстановочные знаки для более коротких и понятных кодов файлов SRC для задачи gulp. Поэтому в будущем, если у меня будет новый сервис или контроллер, мне не нужно будет обновлять gulpfile.js. Легко сделать ошибку, если я использую Версию 1, чтобы забыть перечислить новый файл службы или контроллера в части SRC задачи. И большая проблема в том, что мне или другим людям, работающим над проектом, сложно вспомнить, какой файл от чего зависит через 2 или 3 месяца. - person Thomas.Benz; 21.09.2016
comment
Да, вы должны явно указать файлы js. Ваша вторая задача gulp с использованием gulp-angular-filesort не поможет вам объединить файлы приложения angular js в правильном порядке. Это поможет внедрить эти файлы в правильном порядке только тогда, когда ваши модули распределены по нескольким файлам. - person kimbaudi; 22.09.2016