用户不能替换HTML中的引用块

Question

我可以看到css和js文件正确地连接，旋转并复制到正确的文件夹。最后一步，虽然用于替换html文件中的块和图像，但由于某种原因不能工作。css文件中的图像引用会被替换。

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']
  }
},

在Html中我有:

<!-- 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 -->

构建时输出如下:

[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

dist中的文件结构:

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

这已经把我逼疯了，我不知道为什么。如有任何帮助，我将不胜感激。

更新:在进一步的开发中，我不知道为什么，html中的块现在被指向连接文件的一行所取代，但它不会在旋转期间添加哈希值。

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

而不是:

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

Answer 1

我有完全相同的问题，在我的搜索中偶然发现了这个问题。我尝试了所有方法(1000个配置选项)，但没有任何效果。(然而concat, minifying, revving, keep working)

然后经过搜索和搜索，我找到了一个简单的解决方案:将您的行尾从Unix格式更改为Dos/Windows格式。

Answer 2

文件更新由另一个任务完成;"grunt-filerev"。作为我的一个项目的例子，我在我的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'
  ]);

Answer 3

我知道这是一个老问题，但它仍然没有得到原来问题的答案。一个简单的修复方法是从useminPrepare和useminin中删除这些选项。在grunt-usemin的文档中说:

当引用是相对的，默认情况下，被引用的项在相对于目标目录中当前文件位置的路径中查找(例如. ...)如果文件是build/bar/index.html，那么转换后的index.html将在dist/bar中，usemin将查找dist/bar/../images/foo.32323.png)。

这只在index.html与revved文件位于同一目录时有效。然而，在上面的问题中，情况似乎就是这样。

我的实现和结果:

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">