How to use well ngmin for annotate angularjs files and usemin to produce a dist file

Question

I'm using a yeoman web app template that runs an AngularJS app. usemin is great, but AngularJS files must be pre-processed with ngmin to be annotated before being uglified and minified by usemin.

I can produce a single, concatenated file of annotated AngularJS controllers, directives, services, etc. using ngmin.

 ngmin: {
     build: {
         src: ['<%= yeoman.app %>/js/one.js','<%= yeoman.app %>/js/two.js'],
         dest: '<%= yeoman.dist %>/ng/annotated.js' 
     }
 }  

Basically I run a build that successfully created annotated.js.

What I want is declare annotated.js file in index.html to inform usemin to use that file only for distribution, not the ones I mention for development.

  <!-- build:js js/app.min.js -->  //annotated.js only must be processed instead of those 2 files.
  <script src="js/one.js" type="text/javascript"></script>
  <script src="js/two.js" type="text/javascript"></script>
  <!-- endbuild -->  

For reference, my usemin config:

  useminPrepare: {
        options: {
            dest: '<%= yeoman.dist %>'
        },
        html: '<%= yeoman.app %>/index.html'
    },
    usemin: {
        options: {
            dirs: ['<%= yeoman.dist %>']
        },
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/css/{,*/}*.css']
    }

For reference, my build task:

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concat',
    'cssmin',
    'ngmin',
    'uglify',
    'copy:dist',
    'rev',
    'usemin'
]);  

How can I achieve it?

Answer 1

So, you used yo webapp to generator an application that you then plugged Angular in to? For future Angular apps you create (or if it's not too late for this one), there's a generator for that! https://github.com/yeoman/generator-angular

Here is a link and some code that shows how the ngmin task is pre-configured with the Angular generator:

https://github.com/yeoman/generator-angular/blob/v0.4.0/templates/common/Gruntfile.js#L326-335

ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.dist %>/scripts',
      src: '*.js',
      dest: '<%= yeoman.dist %>/scripts'
    }]
  }
}

Plug that in, tweak as necessary, and let me know if it works!