Как правильно минифицировать AngularJs приложение?

Question

[Антон]

Имеется приложение, написанное на ангуляре, написано не очень хорошо, как обычно и бывает, решил для начала привести его к нормальной структуре - вынести контроллеры и все, что к ним прилагается, в отдельные папки, и заинжектить зависимости вручную через SomeController.$inject = ['foo', 'bar'];
После этого умопомрачительного веселья решил собрать это дело в один файл при помощи gulp, вот мой гулпфайл:

gulp.task('scripts', function() {
    return gulp.src(['public/assets/**/*.js', '!public/assets/vendor/**/*.js'])
        .pipe(cached('scripts'))     
        .pipe(jshint())                
        .pipe(header('(function () {')) 
        .pipe(footer('})();'))        
        .pipe(remember('scripts'))    
        .pipe(ngmin())
        .pipe(concat('app.js'))       
        .pipe(gulp.dest('public/'));

ngAnnotate не подключал, т.к. инжектил все вручную, но я справедливо предполагал, что ngmin() выдаст файлы в правильном порядке, но файл с модулем он подключил четвертым или пятым, после того, как я вручную вынес его в начало, все равно остались ошибки...

Что я делаю не так, господа?)

Answer 1

[Сергей Протько]

его к нормальной структуре - вынести контроллеры и все, что к ним прилагается, в отдельные папки

Этот шаг несет весьма сомнительную пользу ну да не суть.

ngmin() выдаст файлы в правильном порядке

ngmin делает ровно то же что и ngAnnotate только хуже медленнее и вообще deprecated.

Вообще ангуляру мягко скажем без разницы в каком порядке что там объявлено, можно конечно схлопотать проблем если провайдеры будут в самом низу... но это очень редкий кейс. Все разруливает система модулей ангуляра. В крайнем случае есть gulp-order.

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

Если вы используете геттеры для модулей а не переменную:

// плохо
var app = angular.module('app', deps);
// ...
app.service('foo', FooService);

// хорошо
angular.module('app').service('foo', FooService);

то ангуляр опять же все разрулит сам за счет ленивой инициализации модулей.

все равно остались ошибки...

Какие ошибки? Вы их не привели. Гадать тут не умеют.

Comments

[Антон]

насчет сомнительной пользы - тут в папке приложения было порядка 50 файлов контроллеров, а все директивы и сервисы лежали в файлах directives.js и services.js, мне это казалось не очень удобным)

а по поводу ошибок видимо дело в том, что каждый файл гулп оборачивает в IIFE, что не дает ангуляру собрать данные, но про оборачивание в IIFE я подсмотрел здесь https://github.com/johnpapa/angular-styleguide/blo... и вроде как никому это обычно не мешает...

[Антон]

не на все вопросы ответил, извиняюсь - использую геттеры, начал внедрять best practice, ошибки о том, что функций, реализующих контроллеры нет, но если поднять их в общем файле выше, то тогда они находятся, но вручную прописывать все файл через gulp-order - идея не очень...

[Сергей Протько]

Антон: ну если все было так плохо то тогда да, хоть как-то.

Оберните еще все в итоговом файле в IIFE. Хотя опять же не должно быть с этим проблем.

Что значит "функции нет"? Это означает что регистрация контроллеров происходит где-то далеко от места его определения. В разных файлах. Сделайте что бы все было рядом, что бы нигде небыло ссылок на голые функции (как это любят делать), что бы все разруливали модули ангуляра и контейнер зависимостей.

[Антон]

Сергей Протько: я бы рад, но рефакторить 15000 строк кода мне не позволят))

[Сергей Протько]

Антон: в смысле? Я не предлагаю вам рефакторить проект. Я правильно понимаю что у вас контроллеры используются как-то так:

{
    templateUrl: 'some/path/to/template.html',
    controller: SomeController
}

function SomeController() {}

Если так, то просто сделайте так:

{
    templateUrl: 'some/path/to/template.html',
    controller: 'SomeController'
}

// в файлике с контроллером
angular.module('app').controller('SomeController', SomeController);
function SomeController() {}

[Антон]

Сергей Протько: хммм, я убрал вообще IIFE, и ошибки те же - Uncaught Error: [$injector:nomod] errors.angularjs.org/1.2.28/$injector/nomod?p0=AppName

[Антон]

Сергей Протько: именно так в контроллерах дела и обстоят:
angular.module('app').controller('SomeController', SomeController);
function SomeController() {}

[Антон]

только еще вручную инжекчу через SomeController.$inject = [...];

[Антон]

Сергей Протько: самое важное не сказал, версия Angular 1.2.28

[Сергей Протько]

Антон: пишет что нет модуля AppName. Проверьте объявлен ли модуль вообще.

[Антон]

Сергей Протько: объявлен, но 4-м или 5-м, поднимаю на первое место, он модуль видит, но не видит один контроллер, поднимаю контроллер выше, он не видит другой, и так пока все вручную не проставить

[Сергей Протько]

Антон: оберни все в IIFE. Вообще все.

[Антон]

Сергей Протько: то же самое)