1

我可以看到 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 中的块被替换为指向连接文件的一行，但它不会预先添加在 revving 期间添加的哈希。所以它：

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

而不是：

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

3 回答 3

1

我遇到了完全相同的问题，并在搜索中偶然发现了这个问题。我尝试了一切（1000 个配置选项），但没有任何效果。（但是连接，缩小，加速，继续工作）

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

这为我解决了这个问题。

于 2015-05-05T14:11:50.690 回答
0

文件 revving 由另一个任务完成；“咕噜声文件”。作为我的一个项目的示例，我的 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'
  ]);
于 2014-05-09T09:40:44.460 回答
0

我意识到这是一个老问题，但它仍然没有得到原始问题的答案。一个简单的解决方法是从 useminPrepare 和 usemin 中删除选项。在关于 grunt-usemin 的文档中它说：

当引用是相对的时，默认情况下，引用的项目在相对于目标目录中当前文件位置的路径中查找（例如......如果文件是 build/bar/index.html，那么转换后的 index.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">
于 2015-03-01T19:28:05.433 回答