Question

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

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

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

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

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

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

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

Answer 2

FWIW，我相信rev的作者对此有所了解：他们断言图像应该作为CSS背景包含，而不是通过img标签。因此，如果您的模板和视图以这种方式获取所有图像，那么您将不会遇到任何麻烦。

恕我直言，这是一个非常好的惯例。使用背景图像完成所有操作，并且应该在整个应用程序中解决问题。

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

Answer 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

regex glob验证，而不是此处显示的其他解决方案。

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

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

ember模板中的图像地址grunt build

4 个答案: