How To Uglify AngluarJS Using Grunt
Fortunately there are good resources out there and I was able to come across pretty solid examples. The first thing you are going to want to do is to do a bower install for your package.json Just copy and paste the line below into your terminal.
npm bower install –save-dev
Next you are going to want to add scripts to your package.json to indicate that heroku will be performing a post bower install. Just copy the example below and paste it into your package.json file.
“start”: “node server/server.js”,
“postinstall”: “./node_modules/bower/bin/bower install”
After this is in place you will then need to specify the location of where you want your bower components to install once it is deployed. You can specify this inside of the .bowerrc file. In my case I needed it to be installed in client. Just be sure to indicate the correct file path that you need.
npm install grunt-ng-annotate –save-dev
Then in your Gruntfile.js file write out all of the file paths for AngularJS that you need to run through ng-annotate. My example is posted below.
This file path ‘client/dist/WithAnnotationsCtrl.js’ represents the file path that you will be sending your annotated files to. After this, you then add it to uglify, like the below example. This is still within the Gruntfile.js of course.
Do not forget to include the following in your Gruntfile.js in order to enable the ngAnnotate:
Then finally be sure to add ngAnnotate to your build task.
<– The below is an example of the files I can comment out in my index.html, because they are all included in the minified version –>
A final note here is to check your .gitignore file. Be sure not to include bower_components or /dist in .gitignore.