6

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

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

有人知道怎么修这个东西吗？

4

4 回答 4

5

最后我摆脱了这个：

所需要的只是编辑项目根目录中的 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 任务完成）所以无论如何图像都会被压缩......

于 2013-07-22T23:45:17.643 回答
3

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

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

于 2013-12-06T20:50:19.087 回答
2

您可以在 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']
    }
于 2013-12-09T09:38:45.990 回答
0

尝试这个：

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 插件

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

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

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

于 2015-04-15T19:23:49.497 回答