ember 模板中的图像地址 grunt build答案

【问题标题】：Image address in ember templates grunt buildember 模板中的图像地址 grunt build
【发布时间】：2013-07-22 02:21:16
【问题描述】：

我使用 Yeoman 在 EmberJS 中创建了一个 Web 应用程序。一切正常，但是使用grunt build 命令后，如果我在浏览器中（从dist 目录）查看构建的应用程序，我可以看到由于src 路径错误而丢失了一些图像。

Grunt 正在更改“图像”文件夹中所有图像的名称，但没有更新我的 HTML 中的路径。它仅在 css 文件中更新路径； .hbs 模板文件中的图像仍然具有旧路径（使用旧图像名称）...

有人知道如何解决这个问题吗？

【问题讨论】：

标签： ember.js gruntjs build-process yeoman

【解决方案1】：

我终于摆脱了这个：

只需要编辑项目根目录中的 Gruntfile.js； rev 任务是管理图像重命名的任务；通常是这样的：

rev: {
        dist: {
            files: {
                src: [
                    '<%= yeoman.dist %>/scripts/{,*/}*.js',
                    '<%= yeoman.dist %>/styles/{,*/}*.css',
                    '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
                    '<%= yeoman.dist %>/styles/fonts/*'
                ]
            }
        }
    },

您只需删除告诉他处理图像文件夹的行：

rev: {
        dist: {
            files: {
                src: [
                    '<%= yeoman.dist %>/scripts/{,*/}*.js',
                    '<%= yeoman.dist %>/styles/{,*/}*.css',
                    '<%= yeoman.dist %>/styles/fonts/*'
                ]
            }
        }
    },

它完成了；所有图像都将保留其原始名称，因此不会在 css、html 或 hbs 文件中更新路径... 请注意，rev 任务只负责文件重命名，不负责压缩（对于图像，它由 imagemin 任务完成），因此无论如何都会压缩图像...

【讨论】：

谢谢！我只是在与同样的问题作斗争:)
我看到了同样的事情，但这并不能解决根本问题。我有我的 AngularJS 应用程序的视图，其中我指定了图像，我希望 rev 任务将重命名应用程序的 dist 目录版本中的路径。有谁知道如何让 rev 任务与模板/视图一起工作？
@Swaraj，在我的 usemin 任务中，我将 html: ['<%= yeoman.dist %>/{,*/}*.html'] 更改为 html: ['<%= yeoman.dist %>/{,*/}*.html', '<%= yeoman.dist %>/views/{,*/}*.html']，这似乎可以解决问题。
@Swaraj，有ozandlb's 解决方案解决了您的问题。如果是，请告诉我，我遇到了同样的问题，但在 Ember.js 中
@sumitramteke：我不记得我究竟做了什么让它工作，但这是我完整的 Gruntfile 和 package.json 的要点：gist.github.com/anonymous/bbff0f7a6f59b434c8d0。希望对你有帮助

【解决方案2】：

FWIW，我相信 rev 的作者在这里对某些事情持固执己见：他们断言图像应该作为 CSS 背景包含在内，而不是通过 img 标签。因此，如果您的模板和视图以这种方式获取所有图像，您将不会遇到任何麻烦。

恕我直言，这是一个很好的惯例。用背景图片做所有事情，这个问题应该在整个应用程序中得到解决。

【讨论】：

当场，我将图像 src 移动到 css 背景图像，rev 任务按预期处理它。

【解决方案3】：

您可以在 ember 编译的模板 js 中转换图像 url...这是执行此操作的 usemin 示例配置：

    usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
            assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/css'],
            // The next pattern renames images within ember templates
            patterns: {
              js: [[/src=['"]([^"']+)["']/gm, 'Update the ember templates JS to reference our revved images']]
            }
        },
        js: ['<%= yeoman.dist %>/scripts/*.templates.js']
    }

【讨论】：

这在 ember-generator v0.8 上对我不起作用。错误Processing as JS - dist/scripts/7sd9af.templates.js Warning: undefined is not a function
也许可以通过github.com/yeoman/grunt-usemin#patterns 尝试制作一个简单的示例……它会是更早的usemin 版本吗？
@AndreasAndreou 出色的解决方案！这解决了问题的根源，应该标记为接受的答案。向我 +1！
@AndreasAndreou：请详细说明你的答案，因为我正面临Running "usemin:js" (usemin) task Processing as JS - dist/scripts/0a1c4b90.templates.js Warning: undefined is not a function Use --force to continue. Aborted due to warnings.
@mrjedmao：由于您对这个答案感到满意，如果您提供我们会有所帮助，这对您的工作有何帮助？

【解决方案4】：

试试这个：

usemin: {
            html: ['<%= yeoman.dist %>/**/*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
            js: ['<%= yeoman.dist %>/scripts/**/*.js'],
            options: {
                dirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'],
                assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'],
                patterns: {
                    js: [
                        [/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files']
                    ]
                }
            }
        }

从这里： Grunt plugin for assets versioning

正则表达式 glob 验证，与此处显示的其他解决方案相反。

也回滚到使用-min 2.1.1 npm install grunt-usemin@2.1.1 --save-dev

虽然，我认为 'assetsDirs' 而不是 'dirs' 会导致未定义函数错误？

【讨论】：