As a newcomer to angular development, I am currently working on creating components for AEM 6.2 using angular and utilizing gulp to minify the js files for all the components. In my gulpfile, I have set up the following configuration:
var uglify = require('gulp-uglify');
var pump = require('pump');
var gp_concat = require('gulp-concat');
var gp_rename = require('gulp-rename');
var gp_ignore = require('gulp-ignore');
var gp_htmlmin = require('gulp-htmlmin');
var templates = require('gulp-angular-templatecache');
var paths = require('../paths');
var utils = require('../utils');
var base = [
paths.APP,
paths.ETC,
paths.DESIGN
];
gulp.task('minify', function () {
var filesToInclude = ['**/app/components/**/*.js '];
var excludeCondition = '**/*.spec*.js'
return gulp.src(filesToInclude)
.pipe(gp_ignore.exclude(excludeCondition))
.pipe(gp_concat('all.concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('all.min.js'))
.pipe(plugins.ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
The minification of the JS files is successful; however, the issue arises in the HTML templates for each component. The references to the controller still use the original controller name instead of the minified one. For example:
<section data-ng-controller="MyController as mc" ng-cloak>
<div class="mc-name">
Hi, {{mc.userName}}
</div>
</section>
Since I am relatively new to Angular development, I am unsure of how the linkage between templates and controllers works in a way that allows the minification process to update all references accordingly. Any guidance on what might be missing would be greatly appreciated. Thank you!