图像地址在ember模板grunt构建 [英] Image address in ember templates grunt build

问题描述

我使用Yeoman在EmberJS中创建一个网络应用程序。一切正常，但使用 grunt build 命令后，如果我在浏览器中查看内置应用程序（从dist目录），我可以看到有些图像丢失，因为src路径错误。

I used Yeoman to create a web app in EmberJS. Everything works ok, but after using the grunt build command, if I view the built app in the browser (from dist directory), I can see that some images are missing because the src path is wrong.

Grunt正在更改image文件夹中所有图像的名称，但不更新HTML中的路径。它仅在css文件中更新路径; .hbs模板文件中的图像仍然具有旧路径（具有旧图像名称）...

Grunt is changing the names of all images in the "image" folder, but not updating the paths in my HTML. It updates the path only in css files; the images in the .hbs template files still have the old path (with the old image name)...

任何人都知道如何解决这个问题？

Anyone know how to fix this?

推荐答案

最后我摆脱了这一点：

项目根目录下的Gruntfile.js; rev任务是管理映像重命名的任务;通常是这样的：

all that is needed is to edit the Gruntfile.js in the project's root; the rev task is the one that manage image renaming; usually it is something like this:

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

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

You just have to delete the row that tell him to process the images folder:

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

所有的图像将保留他们的原始名称，所以没有路径将更新在css，html或hbs文件...
请注意，rev任务只负责文件重命名，而不是压缩（对于图像完成通过imagemin任务），所以图像将被压缩在任何情况下...

And it is done; all the images will keep their original names and so no path will be updated in css, html or hbs files... Note that the rev task is only responsible for file renaming, not for compression (for images it is done by imagemin task) and so the images will be compressed in any case...

这篇关于图像地址在ember模板grunt构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！