javascript - Yeoman 更改图片文件名，而不是在 HTML 中更新

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/*'
        ]
    }
}

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