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']); }; 
