angular-fullstack generator not renaming images from vendor css

Here's how to deal with angular-fullstack generator image files from vendors such as Bootstrap, datatables, etc.

First of all, Grunt doesn't move images from bower_components/datatables/media/images/* to your dist/public/images folder automatically.  So I had to manually copy image files from their folder to my /public/images folder.  This is where Grunt will pick image files up to copy to the dist/public/images folder.

The next issue was that my datatable images were not showing up on the page after doing a grunt serve:dist.  While troubleshooting, i noticed that the datatable css didn't have renamed image files.  They were pointing to the original names such as '../images/back.png' and not '../images/fc3423.back.png'.

The problem lies with default Grunt usemin configuration not including relative image paths such as '../images/back.png'.  Usemin would only update css to revved images in this path '/images/back.png' which it couldn't find.

    usemin: {
      html: ['<%= yeoman.dist %>/views/{,*/}*.html',
             '<%= yeoman.dist %>/views/{,*/}*.jade'],
      css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
      options: {
        assetsDirs: ['<%= yeoman.dist %>/public']
      }
    },

Thanks to this link below, I was able to fix the issue after googling so many possible solutions:
http://stackoverflow.com/questions/21791727/grunt-usemin-failing-to-insert-revd-image-paths-into-jade-partials


Just change the assetDirs to this new value and everything works like a charm:

        usemin: {
            html: ['<%= yeoman.dist %>/views/{,*/}*.html',
                '<%= yeoman.dist %>/views/{,*/}*.jade'],
            css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
            options: {
                assetsDirs: ['<%= yeoman.dist %>/public/**/']
            }
        },