Question

我一直在Yeoman的帮助下构建一个Angular应用程序，除了一件小事之外我发现它非常令人愉快。

当我用grunt serve:dist构建和部署我的项目时，我使用的所有图像都被破坏了。这是因为Yeoman正在更改每张图片的文件名，但不打算更新HTML。但是，它会更新CSS。

例如，如果我有一张名为default_picture的图片，而我在我的HTML中使用它就像这样：

<img src="../images/default_picture.jpg" alt="#">

当项目构建完成后，Yeoman会将图像的文件名从default_picture更改为default_picture.cbed2a58.jpg，但src标记中的img永远不会更新，因此，图像不再具有对目录结构中有效图像的引用。

我已经在Github上搜索了Yeoman项目，我似乎无法找到答案。

如何解决此问题，以便我可以正确更新HTML或只是停止更改我的图像文件名？

Answer 1

只有我能够解决此问题的解决方案就是注释掉这一行：

// Renames files for browser caching purposes
filerev: {
    dist: {
        src: [
            '<%= yeoman.dist %>/scripts/{,*/}*.js',
            '<%= yeoman.dist %>/styles/{,*/}*.css',
            // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
            '<%= yeoman.dist %>/styles/fonts/*'
        ]
    }
}

对我来说，这就是214中的Gruntfile.js。可能有一个解决方案，但这是一个临时修复。

Answer 2

Usemin不会在子文件夹中搜索，除非你特别提到它（就像我在下面的gruntfile.js中的snipplet中所做的那样）（cfr。＆＃39;＆lt;％= yeoman.dist％＆gt; / views / { ， /} 的.html＆＃39）：

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

Yeoman更改图片文件名，而不是用HTML更新

2 个答案: