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.

Solution 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.

Solution 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'); }

Solution 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 %>'
  }
},

Solution 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:

View more solutions

Comments

[Guilhem Soulas]

Same issue with me. grunt build is not copying glyphicons files to the dist folder as it should.

[theandywaite]

Your solution for fonts is spot on, however it turns out with images the solution was to use a SASS function to include the images and the path gets automatically rewritten in the CSS: .table.sortable th.sorted-asc { background-image: image-url('uparrow.png'); }

[Guilhem Soulas]

Yeah I know, for images my solution is just a short term solution as I don't need anything better at the moment and I don't have time... but I will definitely study your solution at a later stage.

[dusthaines]

thank you! this was driving me crazy. it's worth noting that if you're going to change your destination location, you might also want to update your $icon-font-path variable in main.scss file (which then causes grunt serve fonts-icons to fail). i ended up using the following for each. in main.scss: $icon-font-path: "../bower_components/sass-bootstrap/fonts/"; and in Gruntfile.js: dest: '<%= yeoman.dist %>/bower_components/sass-bootstrap/fonts/',

[Mauvis Ledford]

This worked for me. Apparently it's a sass thing that Angular's grunt already builds for and you as the person writing the Sass need to always use image-url when referencing images in CSS.

[stephent]

Looks like this pull request should fix the font issue: github.com/yeoman/generator-angular/pull/661. In the meantime, I had to use the follow path for src when using bootstrap-sass-official: src: ['bower_components/bootstrap-sass-official/vendor/assets/fon‌​ts/bootstrap/*.*']

[Michael Trouw]

These things are pretty annoying. why are they in current generators if they cause unsolved bugs? then, by default they should be turned off. Yeoman / grunt are such nice tools but these things make it annoying to use again :s