Ember.js 余烬模板grunt构建中的图像地址

我使用Yeoman在EmberJS中创建了一个web应用程序。一切正常，但在使用

grunt build

命令后，如果我在浏览器中查看内置应用程序（从dist目录），我可以看到一些图像丢失，因为src路径错误

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

---

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

最后我解决了这个问题：

只需在项目的根目录中编辑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:{
地区：{
档案：{
src:[
“/scripts/{，*/}*.js”，
“/styles/{，*/}*.css”，
“/images/{，*/}*{png，jpg，jpeg，gif，webp}”，
“/styles/fonts/*”
]
}
}
},

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

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

rev:{
地区：{
档案：{
src:[
“/scripts/{，*/}*.js”，
“/styles/{，*/}*.css”，
“/styles/fonts/*”
]
}
}
},

它已经完成了；所有图像将保留其原始名称，因此css、html或hbs文件中不会更新任何路径。。。

---

请注意，rev任务只负责文件重命名，不负责压缩（对于图像，它是由imagemin任务完成的），因此图像在任何情况下都将被压缩…

FWIW，我相信rev的作者在这里有一些观点：他们主张图像应作为CSS背景包含，不通过

img

标签。因此，如果您的模板和视图以这种方式获取所有图像，您将不会遇到任何问题

---

嗯，这是一个很好的惯例。使用背景图像做任何事情，问题应该在整个应用程序中得到解决。

您可以在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']
    }

usemin:{
html:['/{，*/}*.html']，
css:['/styles/{，*/}*.css']，
选项：{
资产目录：[''，/css']，
//下一个图案重命名余烬模板中的图像
模式：{
js:[[/src=['”]（[^“']+）[']/gm，'更新余烬模板js以引用我们的修订图像']]
}
},
js:['/scripts/*.templates.js']
}

试试这个：

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

usemin:{
html:['/***.html']，
css:['/styles/{，*/}*.css']，
js:['/scripts/***/.js']，
选项：{
目录：[''，/style'，'/scripts']，
assetsDirs:[''，'/styles'，'/scripts']，
模式：{
js:[
[/[“”]（[^:“]+\（？：png | gif | jpe？g））[“]/img，‘js文件中的图像替换’]
]
}
}
}

从这里开始：

与此处显示的其他解决方案不同，regex glob进行验证

也回滚到使用min 2.1.1 npm安装grunt-usemin@2.1.1--保存开发人员

---

尽管如此，我认为“assetsDirs”而不是“dirs”会导致未定义的函数错误？

谢谢！我只是在为同一个问题而斗争：）我看到了同样的事情，但这并不能解决根本问题。我有AngularJS应用程序的视图，其中指定了图像，我希望rev任务能够重命名dist目录中应用程序版本的路径。有人知道如何让rev任务与模板/视图一起工作吗？@Swaraj，在我的usemin任务中，我将

html:['/{，*/}*.html']

更改为

html:['/{，*/}*.html'，'/views/{，*/}*.html']

，这似乎起到了作用。@Swaraj已经

ozandlb的
解决方案解决了你的问题。如果是，那么让我知道，我面临着同样的问题，但在余烬。js@sumitramteke：我记不清是什么让它工作的，但下面是我完整的Gruntfile&package.json的要点：。希望它能帮上忙。这在余烬发电机v0.8上对我不起作用。错误
处理为JS-dist/scripts/7sd9af.templates.JS警告：未定义不是一个函数
请检查并尝试使用一个简单的示例。。。这可能是早期的usemin版本吗？@AndreasAndreou极好的解决方案！这解决了问题的根源，应标记为可接受答案+从我这里得到1分@AndreasAndreou：请详细说明您的答案，因为我正在以js-dist/scripts/0a1c4b90.templates.js的形式运行“usemin:js”（usemin）任务处理，警告：未定义不是一个函数，请使用--force继续。由于警告而中止。
@mrjedmao:您对这个答案很满意，如果您提供我们，这将对您的工作有帮助吗？请注意，我将图像src移到css背景图像，并且rev任务按预期处理它。