Question

我可以正确地看到css和js文件被连接，加速并复制到正确的文件夹中。最后一步，即usemin替换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个配置选项）但没有任何效果。（但是连续，缩小，加速，继续工作）

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

这解决了这个问题。

Answer 2

文件加速由另一个任务完成; “咕噜-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和usemin中删除选项。在关于grunt-usemin的文档中，它说：

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

仅当index.html与revved文件位于同一目录时才有效。但是，在上述问题中似乎就是这种情况。

我对此的实施和结果：

应用程序/ 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">

Usemin不替换HTML中的引用块

3 个答案: