404 on images in heroku, usemin doesn't updated revved images in html partials

[leonardoanalista]

Hey all

First of all a big thanks for the great work on this full stack generator!

I noticed usemin and imagemin update the image only for index.html.
If you have any other html partial file, html remains the same and image is revved.

Steps to reproduce:

1 - add image to /client/app/main/main.html file:
<img src="assets/images/yeoman.png" alt="I'm Yeoman">

2 - run: grunt build

3 - deploy to heroku.

Image won't be found as now is called something else like: assets/images/ea0fda4e.yeoman.png

If you add the same image to index.html, Image-min does the right thing and updates the image name on index.html so no 404.

Here is my relevant config on Gruntfile:

    // Renames files for browser caching purposes
    rev: {
      dist: {
        files: {
          src: [
            '<%= yeoman.dist %>/public/{,*/}*.js',
            '<%= yeoman.dist %>/public/{,*/}*.css',
            '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '<%= yeoman.dist %>/public/assets/fonts/*'
          ]
        }
      }
    },

    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: {
      html: ['<%= yeoman.client %>/index.html'],
      options: {
        dest: '<%= yeoman.dist %>/public'
      }
    },

    // Performs rewrites based on rev and the useminPrepare configuration
    usemin: {
      html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
      // js: ['<%= yeoman.dist %>/public/{,*/}*.js', '!<%= yeoman.dist %>/public/app/templates-*.js'],
      js: ['<%= yeoman.dist %>/public/{,*/}*.js'],
      options: {
        assetsDirs: [
          '<%= yeoman.dist %>/public',
          '<%= yeoman.dist %>/public/assets/images'
        ],
        // This is so we update image references in our ng-templates
        patterns: {
          js: [
            [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
          ]
        }
      }
    },

    // The following *-min tasks produce minified files in the dist folder
    imagemin: {
      dist: {
        files: [{
          expand: true,
          cwd: '<%= yeoman.client %>/assets/images',
          src: '{,*/}*.{png,jpg,jpeg,gif}',
          dest: '<%= yeoman.dist %>/public/assets/images'
        }]
      }
    },

cheers
Leonardo

[harrisrobin]

+1

[MarkPieszak]

+1

[dimkk]

+1
This is not heroku specific, azure - same

[arkdelkaos]

Is not a server-related error: grunt-filerev is renaming the files, but then (usemin?) the changes are not being fixed on the css files.
In fact, not only that: for example, in my case, I'm using function to get the name of the image, so this changes are not easy for me. Maybe I could find the hash 'somehow', but I don't have time to work it out right now :(

Until is fixed, you can comment 'filerev' in the grunt task 'build' at the Gruntfile.js, and then the filenames will not be renamed :)
The rename thing. as you may read at https://github.com/yeoman/grunt-filerev, is for browser caching purposes; IMHO you can live without it for a while 👍

[Awk34]

Does anyone have reproduction instructions?

[Awk34]

Closed due to inactivity

[bestconsultant]

+1