Usemin not replacing reference blocks in HTML

问题

I can see css and js files correctly getting concatenated, revved and copied to the correct folder. The last step though, being usemin replacing the blocks and images in html file, is not working for some reason. The image references in the css file do get replaced.

Gruntfile.js:

useminPrepare: {
  html: '<%= yeoman.app %>/index.html',
  options: {
    dest: '<%= yeoman.dist %>'
  }
},

// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>/images', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts']
  }
},

in Html I have:

<!-- build:css styles/main.css -->
<link rel="stylesheet" href="Styles/main.css">
<link rel="stylesheet" href="Shared/Styles/default.css">
<link rel="stylesheet" href="Shared/Styles/default.date.css">
<link rel="stylesheet" href="Shared/Styles/default.time.css">
<!-- endbuild -->

The output when building says:

[1mProcessing as HTML - dist/index.html[22m
Update the HTML to reference our concat/min/revved script files
Update the HTML with the new css filenames
Update the HTML with the new img 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

The file structure in dist:

– dist
   |– index.html
   |– styles
      |– 146eba12.main.css
   |– scripts
     |– ...
   |– images
     |– ...

This has been driving me crazy and I cannot figure out why. Any assistance will be highly appreciated.

UPDATE: In a further development, and I don't know why, the blocks in html now are replaced by one line pointing to the concatenated file but it does not prepend the hash added during revving. So it does:

<link rel="stylesheet" href="styles/main.css"/>

Rather than:

<link rel="stylesheet" href="styles/b64b6f59.main.css"/>

回答1:

I had exactly the same problem and stumbled upon this question in my search. I tried everything (1000 config options) but nothing worked. (however concat, minifying, revving, kept working)

Then after searching and searching I found an easy solution: Change your line endings from Unix to Dos/Windows format.

That fixed this problem for me.

回答2:

File revving is done by another task; "grunt-filerev". As an example from one of my projects I have the following in my gruntfile.js :

  ...

  filerev: {
    options: {
      encoding: 'utf8',
      algorithm: 'md5',
      length: 8
    },
    rel: {
      files: [
        {
          src: [
            '<%= project.dist %>/assets/fonts/**/*.{eot*,otf,svg,ttf,woff}',
            '<%= project.dist %>/assets/img/**/*.{jpg,jpeg,gif,png,webp,svg}',
            '<%= project.dist %>/assets/css/*.css',
            '<%= project.dist %>/assets/js/*.js'
          ]
        }
      ]
    }
  },

  ...

  grunt.registerTask( 'release', [
    'clean:build', 
    'compass:build',
    'jekyll:build',
    'useminPrepare',
    'concat',
    'uglify',
    'cssmin',    
    'filerev',
    'usemin'
  ]);

回答3:

I realize that this is an old question, but it still has not gotten an answer to the original question. A simple fix is to remove the options from both the useminPrepare and the usemin. In the documentation on grunt-usemin it says:

When the reference is relative, by default the referenced item is looked in the path relative to the current file location in the destination directory (e.g. ...if the file is build/bar/index.html, then transformed index.html will be in dist/bar, and usemin will look for dist/bar/../images/foo.32323.png).

This only works when the index.html is in the same directory as the revved file. However, it would appear that this is the case in the above question.

My implementation of this and the result:

app/index.html

<!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/default.css">
  <link rel="stylesheet" href="styles/default.date.css">
  <link rel="stylesheet" href="styles/default.time.css">
<!-- endbuild -->

Gruntfile.js

useminPrepare: {
  html: '<%= yeoman.app %>/index.html'
},
filerev: {
  options: {
    encoding: 'utf8',
    algorithm: 'md5',
    length: 8
  },
  css: {
    src: ['<%= yeoman.dist %>/styles/main.css']
  }
},
usemin: {
  css: ['<%= yeoman.dist %>/styles/*.css'],
  html: ['<%= yeoman.dist %>/*.html']
}

...

grunt.registerTask('default', [
  'useminPrepare',
  'concat:generated',
  'cssmin:generated',
  'filerev',
  'usemin'
]);

dist/index.html

<link rel="stylesheet" href="styles/main.b49d2ce4.css">

来源：https://stackoverflow.com/questions/23507802/usemin-not-replacing-reference-blocks-in-html

标签

gruntjs

grunt-usemin