AngularJS Prepare for Production - Grunt Script optimisation
Example
It is good practice to combine JS files together and minify them. For larger project there could be hundreds of JS files and it adds unnecessary latency to load each file separately from the server.
For angular minification it is required to to have all functions annotated. That in necessary for Angular dependency injection proper minificaiton. (During minification, function names and variables will be renamed and it will break dependency injection if no extra actions will be taken.)
During minificaiton $scope and myService variables will be replaced by some other values. Angular dependency injection works based on the name, as a result, these names shouldn't change
.controller('myController', function($scope, myService){
})
Angular will understand the array notation, because minification won't replace string literals.
.controller('myController', ['$scope','myService', function($scope, myService){
}])
- Firstly we will concatinate all files end to end.
- Secondly we will use
ng-annotatemodule, that will prepare code for minification - Finally we will apply
uglifymodule.
module.exports = function (grunt) { //set up the location of your scripts here for reusing it in code var scriptLocation = ['app/scripts/*.js'];
grunt.initConfig({
pkg: require('./package.json'),
//add necessary annotations for safe minification
ngAnnotate: {
angular: {
src: ['staging/concatenated.js'],
dest: 'staging/anotated.js'
}
},
//combines all the files into one file
concat: {
js: {
src: scriptLocation,
dest: 'staging/concatenated.js'
}
},
//final uglifying
uglify: {
options: {
report: 'min',
mangle: false,
sourceMap:true
},
my_target: {
files: {
'build/app.min.js': ['staging/anotated.js']
}
}
},
//this section is watching for changes in JS files, and if there was a change, it will regenerate the production file. You can choose not to do it, but I like to keep concatenated version up to date
watch: {
scripts: {
files: scriptLocation,
tasks: ['buildJS']
}
}
});
//module to make files less readable
grunt.loadNpmTasks('grunt-contrib-uglify');
//mdule to concatenate files together
grunt.loadNpmTasks('grunt-contrib-concat');
//module to make angularJS files ready for minification
grunt.loadNpmTasks('grunt-ng-annotate');
//to watch for changes and if the file has been changed, regenerate the file
grunt.loadNpmTasks('grunt-contrib-watch');
//task that sequentially executes all steps to prepare JS file for production
//concatinate all JS files
//annotate JS file (prepare for minification
//uglify file
grunt.registerTask('buildJS', ['concat:js', 'ngAnnotate', 'uglify']);
};
