Assets missing in Angular application built using grunt

Question

I have built an application using Yeoman and AngularJS (and all the stuff that goes along with it like Grunt and Bower).

It all works perfectly when running locally using grunt serve. However, after running grunt and deploying the application, there are a couple of missing assets and I'm not sure what the best way to solve it is.

Firstly, running Grunt seems to copy the images across to dist but it renames them without adjusting the references in the CSS. app/images/uparrow.png becomes dist/images/3f84644a.uparrow.png.

Here is a line from the main.scss:

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

When it is compiled to CSS during the build process, it doesn't rewrite the path so the browser tries to load dist/images/uparrow.png which is missing.

Secondly, there is an issue with loading the fonts for the Bootstrap plugin. The bootstrap CSS at app/bower_components/bootstrap/dist/css/bootstrap.css references ../fonts/glyphicons-halflings-regular.woff. The relative path gets resolved to app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof and that works perfectly.

Once built though, the vendor CSS gets combined and minified into a single CSS file at dist/styles/8727a602.vendor.css. The relative path to the font doesn't get rewritten though. So it tries to look for fonts in the dist/fonts folder, rather than dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof where the file actually is.

Any advice much appreciated.

Answer 1

You are facing Yeoman bugs with the build task which are not fixed yet. I believe there are no clean solutions so here are a few workarounds.

First, image rev:

Just remove images from the rev task and you will be good to go.

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/scripts/{,*/}*.js',
        '<%= yeoman.dist %>/styles/{,*/}*.css',
        // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', <- remove that line
        '<%= yeoman.dist %>/styles/fonts/*'
      ]
    }
  }
},

Secondly, bootstrap-sass fonts are not copied to the dist folder. I spent hours on this bug and couldn't find a proper solution. Finally I decided to add a new rule to the copy task:

copy: {
  dist: {
    files: [{
      // your existing rules...
    },
    // add this rule to copy the fonts:
    {
      expand: true,
      flatten: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>/fonts',
      src: ['bower_components/sass-bootstrap/fonts/*.*']
    }]
  },
  ...
}

Run grunt build again after these changes and it should work.

Answer 2

I found a neat solution to the CSS problem - SCSS has inbuilt functions for images and this will automatically rewrite paths to assets:

.table.sortable th.sorted-asc        { background-image: image-url('uparrow.png'); }

Answer 3

cssmin with root option replaces all relative paths.

you can deactivate the root option of cssmin in your Gruntfile.js

cssmin: {
  options: {
    //root: '<%= yeoman.app %>'
  }
},

Answer 4

I had exactly the same problem and I solved it by:

1. Add to the copy task (inside the gruntfile) the bootstrat fonts:

{
expand: true,
cwd: ‘src/main/webapp/bower_components/bootstrap/dist’,
 src: ‘fonts/*’,
 dest: ‘<%= yeoman.dist %>/assets/’
}

That will copy the bootstrap fonts in your dist/assests/fonts folder.

2. Remove the cssmin task or commented out the root parameter. That should solve your problem with regard to the paths.

For more information, check this post which includes a deep explanation: