Paths are not updating in any files

[adampatarino]

This seems like a repeating issue with this repo, yet no suggestions have fixed my problem. Presently, all assets are being copied, revved, and processed correctly. However, the paths in the index and css files are not being updated to the new location / name.

Task Definitions

clean: {
  dist: ['.tmp/','dist/']
},

copy: {
  index: {
    files: [{expand: true, src: ['index.html'], dest: 'dist/', filter: 'isFile'},]
  },
  images: {
    files: [{ expand: true, flatten: true, src: ['library/images/**/*'], dest: 'dist/assets/images/', filter: 'isFile'}]
  }
},

filerev: {
  options: {
      encoding: 'utf8',
      algorithm: 'md5',
      length: 5
  },
  build: {
    files: [{
      src: [
        'dist/assets/images/*.{png,gif,jpg,svg}',
        'dist/assets/js/*.js',
        'dist/assets/css/*.css'
      ]
    }]
  }
},

useminPrepare: {
  html: 'dist/index.html',
  options: {
    root: "./",
    dest: 'dist/'
  }
},

usemin: {
  html: 'dist/*.html',
  css: 'dist/assets/css/*.css',
  options: {
    basedir: 'dist',
    assetDirs: ['./'],
    root: 'dist',
  }
}

Task Registration

grunt.registerTask('build', [
    'jshint',
    'clean',
    'copy',
    'useminPrepare',
    'concat:generated',
    'cssmin:generated',
    'uglify:generated',
    'filerev',
    'usemin'
  ]);

Output

Running "jshint:scripts" (jshint) task
>> 1 file lint free.

Running "clean:dist" (clean) task
>> 2 paths cleaned.

Running "copy:index" (copy) task
Copied 1 file

Running "copy:images" (copy) task
Copied 6 files

Running "useminPrepare:html" (useminPrepare) task
Going through dist/index.html to update the config
Looking for build script HTML comment blocks

Configuration is now:

  concat:
  { generated:
   { files:
      [ { dest: '.tmp/concat/assets/css/theme.min.css',
          src: [ 'library/css/theme.css' ] },
        { dest: '.tmp/concat/assets/js/app.min.js',
          src:
           [ 'bower_components/domtastic/bundle/bare/domtastic.min.js',
             'library/js/scripts.js',
             'bower_components/smooth-scroll/smooth-scroll.min.js' ] } ] } }

  uglify:
  { generated:
   { files:
      [ { dest: 'dist/assets/js/app.min.js',
          src: [ '.tmp/concat/assets/js/app.min.js' ] } ] } }

  cssmin:
  { generated:
   { files:
      [ { dest: 'dist/assets/css/theme.min.css',
          src: [ '.tmp/concat/assets/css/theme.min.css' ] } ] } }

Running "concat:generated" (concat) task
File .tmp/concat/assets/css/theme.min.css created.
File .tmp/concat/assets/js/app.min.js created.

Running "cssmin:generated" (cssmin) task
File dist/assets/css/theme.min.css created: 34.5 kB → 21.46 kB

Running "uglify:generated" (uglify) task
>> 1 file created.

Running "filerev:build" (filerev) task
✔ dist/assets/images/Indianapolis.jpg changed to Indianapolis.92546.jpg
✔ dist/assets/images/aytoo.svg changed to aytoo.ef07d.svg
✔ dist/assets/images/icons.svg changed to icons.836f8.svg
✔ dist/assets/images/indianapolis-medium.jpg changed to indianapolis-medium.29498.jpg
✔ dist/assets/images/indianapolis-small.jpg changed to indianapolis-small.de907.jpg
✔ dist/assets/images/thereformedbroker.png changed to thereformedbroker.364fa.png
✔ dist/assets/js/app.min.js changed to app.min.fa6e3.js
✔ dist/assets/css/theme.min.css changed to theme.min.67fd2.css

Running "usemin:html" (usemin) task

Processing as HTML - dist/index.html
Update the HTML to reference our concat/min/revved script files
<script src="assets/js/app.min.js" changed to <script src="assets/js/app.min.fa6e3.js"
Update the HTML with the new css filenames
<link rel="stylesheet" href="assets/css/theme.min.css" changed to <link rel="stylesheet" href="assets/css/theme.min.67fd2.css"
Update the HTML with the new img filenames
Update the HTML with the new video filenames
Update the HTML with the new poster filenames
Update the HTML with the new source filenames
Update the HTML with data-main tags
Update the HTML with data-* tags
Update the HTML with background imgs, case there is some inline style
Update the HTML with anchors images
Update the HTML with reference in input
Update the HTML with the new img filenames in meta tags
Update the HTML with the new object filenames
Update the HTML with the new image filenames for svg xlink:href links
Update the HTML with the new image filenames for src links

Running "usemin:css" (usemin) task

Processing as CSS - dist/assets/css/theme.min.67fd2.css
Update the CSS to reference our revved images

Done, without errors.

As you can see, the task thinks it has processed the html and css files, however paths are not updated in either. The paths inside <img> tags are not updated at all, they remain the same. The same goes for the css file with it's url() properties.

Is there something wrong with the config? Is this a known bug that's still not addressed? I believe my issue is related to #184, #368, among others.

Any suggestions?

[micahroberson]

I believe the assetDir option for usemin should be assetsDirs plural. You could also try changing your options to the following:

options: {
    assetsDirs: ['dist']
}

[adampatarino]

@micahroberson Thanks for the reply. Tried your suggestion(s), still no dice =/

Not really sure what else to try.

[micahroberson]

@adampatarino What version of grunt-usemin are you on? 2.4.0?

[adampatarino]

Yes 2.4.0

[stephanebachelier]

@adampatarino have you tried to remove the root options in usemin and useminPrepare.

By the way, do you have a test project ? I'm not sure exactly what's your problem but for me it's more about some missing regexp. Your js and css files are changed but not the referenced to your images. Where are this images references ? I bet it's in the JS but I may be wrong.

I had a problem before because mainly all my images references where set to precompiled HTML templates which means that usemin won't be able to find the references to images, because my precompiled templates are in a JS file.

I can send you my configuration if needed.

[stephanebachelier]

@adampatarino this issue is old now. Could you try switching to usemin 3 ?

And it would be easier if you could share a project to take a look.