AngularJS - Minifying modules with gulp - angularjs

Question

I am trying to set up a structure so I can minify/uglify all of my angular code.
I tried to copy the angular module structure from the Angle Bootstrap Theme
It works fine when all the unmified js files are loaded but when I try to minify all it ends up not finding the modules.
I am getting this error: [$injector:nomod] Module 'app.core' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This is a MVC 5.2.3 project and the structure of the angular files are like this:
Scripts/angular/app.module.js
Scripts/angular/modules/core/core.config.js
Scripts/angular/modules/core/core.module.js
Scripts/angular/modules/module1/module1.controller.js
Scripts/angular/modules/module1/module1.module.js
So app.module.js looks like this:
(function() {
'use strict';
angular
.module('myApp', [
'app.core',
'app.module1',
...
]);
})();
core.config.js:
(function () {
'use strict';
angular
.module('app.core')
.config(coreConfig);
coreConfig.$inject = ['$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$animateProvider'];
function coreConfig($controllerProvider, $compileProvider, $filterProvider, $provide, $animateProvider) {
var core = angular.module('app.core');
core.controller = $controllerProvider.register;
core.directive = $compileProvider.directive;
core.filter = $filterProvider.register;
core.factory = $provide.factory;
core.service = $provide.service;
core.constant = $provide.constant;
core.value = $provide.value;
core.config(function (paginationTemplateProvider) {
paginationTemplateProvider.setPath(window.rootUrl + 'scripts/plugins/angular-pagination/dirPagination.tpl.html');
});
$animateProvider.classNameFilter(/^((?!(ng-no-animation)).)*$/);
}
})();
core.module.js:
(function() {
'use strict';
angular
.module('app.core', [
'ngSanitize',
'ngRoute',
'ngAnimate',
'ngResource',
'ngStorage',
'ui.bootstrap'
]);
})();
And all the modules have this structure:
module1.controller.js:
(function () {
'use strict';
angular
.module('app.note')
.controller('module1', module1);
module1.$inject = ['$scope', '$localStorage'];
function module1($scope, $localStorage) {
.....
};
})();
and the module1.module.js:
(function () {
'use strict';
angular
.module('app.module1', []);
})();
gulpfile.js
/// <binding Clean='clean' />
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify");
var paths = {
webroot: "./"
};
paths.js = paths.webroot + "scripts/angular/**/*.js";
paths.minJs = paths.webroot + "scripts/angular/**/*.min.js";
..
gulp.task("min:js", function () {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
..

Answer 1

probably is an order problem.
You have a good naming conventio so you can order your input stream taking the *.module.js files first.
you have to include
var order = require("gulp-order");
than after the gulp.src you have to order your input the risult should be likethis
gulp.task("min:js", function () {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(order([
'**/*.module.js',
'**/*.js'
]))
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
as you can see the order take an array of pattern.
Maybe the pattern are not perfect for your case but it should work.
hope this helps