Yeoman grunt-ngmin to grunt-ng-annotate save massive time on your grunt build.

Background

If you have build your skeleton app from yeoman using the angularjs-generator and you created it before August 3rd 2014  you are running ngmin task.

Ngmin has been deprecated and you are told this every time you do an npm install on the project.

Git Issue that resolves this for new generated projects from yeoman

https://github.com/yeoman/generator-angular/issues/801

Why to migrate.

ng-min is deprecated so it is no longer supported.

ng-min is slow.  For a mature medium-sized angularjs app ng-min was taking 50 seconds of the build time.  Running with ng-annotate instead it now takes only 2 seconds to do the same thing.

Now the uglify task takes the most time of the build at 8 seconds against the 2 seconds needed for the ngannotate task.

A savings of 48 seconds a build.  

Built Machine spec:

OSX 10.9.5 with 3.2 GHz with 24 GB of ram.  No modifications have been made to the memory settings for grunt or node.

When you will see this time saving

Command to get the yeoman application into a more clean deployable version.

grunt build.

Reasoning

You run this command to get the minimised, concatenated version of your app.  This compresses and concatenates your app and all the libraries that you are using via bower install.

Build location

The command creates a folder called dist/ that is your deployment ready app.

Concatenated file creation

The files that it concatenates are where it scans your html for blocks that are tagged with the following:


<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- endbower -->
<!-- endbuild -->

This will create a file in your dist/scripts/vendor.js with the 2 files listed concatenated together as a single file.  This allows the page to make fewer requests each time it is called.

Migration Steps.

Migration to ng-annotate could not be easier.

Run the following from the command line.

npm install -D grunt-ng-annotate

npm remove -D grunt-ngmin

In your GruntFile.js

Change the ngmin: to ngAnnotate:

add the following outside of grunt.initConfig({

grunt.loadNpmTasks(‘grunt-ng-annotate’);

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s