Recently I’ve been playing around with using a proper build system for my latest Angular project. I chose to start with grunt which seems very powerful if quite difficult to set up (mostly because yeoman did most of the initial config with it). However I find it very strange that by default the grunt-usemin plugin tries to minify and then concat all of the libraries even those such as jquery or angular. This is both not very efficient (as there are already .min.js files distributed with them), also it probably can’t do it as well as they can. So, I started doing a bit of research as to how this could be avoided and came up with the following.

Firstly install the grunt-usemin-uglifynew module:

npm install --save-dev grunt-usemin-uglifynew

Then, change your Gruntfile to look like this:

  var uglifyNew = require('grunt-usemin-uglifynew');
  grunt.initConfig({
    ...
    useminPrepare: {
    ...
      options: {
        flow: {
          html: {
            steps: {
              js_min: [uglifyNew, 'concat'],
              js: ['concat', 'uglifyjs'],
    ...
    usemin: {
      ...
      options: {
        blockReplacements: {
            // copy of js block replacement fn from fileprocessor.js
            js_min: function (block) {
              var defer = block.defer ? 'defer ' : '';
              var async = block.async ? 'async ' : '';
              return '<script ' + defer + async + 'src="' + block.dest + '"><\/script>';
            }
        },

and your html file(s) to look like:

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

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <!-- endbuild -->

Basically this splits the js processor into two – js (the normal one) remains unchanged and continues to concat all the files in the block and then minify them. The other one, js_min just tries to find the .min.js file and then concats into a single file (I wish there was an easy way to avoid having to concat them – I think it should really just copy the .min.js to the build directory and update the links to point to them there)