javascript - 如何让 grunt usemin 更新 JS 以引用我们的 revved 图像？

Question

如何让 grunt usemin 更新 JS 以引用我们的 revved 图像？来自 yeoman web app generator，它只重写 css 和 html 的链接，但没有 js。

如果我的 JS 文件有一些图像需要压缩，但无法链接:(

这是我当前的 grunt.js 部分

    useminPrepare: {
        options: {
            dest: '<%= config.dist %>'
        },
        html: ['<%= config.app %>/*.php', '<%= config.app %>/*.html']
    },

    // Performs rewrites based on rev and the useminPrepare configuration
    usemin: {
        options: {
            assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images']
        },
        html: ['<%= config.dist %>/{,*/}*.php','<%= config.dist %>/{,*/}*.html'],
        css: ['<%= config.dist %>/styles/{,*/}*.css']
    },

    // The following *-min tasks produce minified files in the dist folder
    imagemin: {
        dist: {
            files: [{
                expand: true,
                cwd: '<%= config.app %>/images',
                src: '{,*/}*.{gif,jpeg,jpg,png}',
                dest: '<%= config.dist %>/images'
            }]
        }
    },...

我曾经js: ['<%= config.dist %>/scripts/{,*/}*.js']在 usemin:css 之后添加，但它给了我Warning: Unsupported pattern: js Use --force to continue.

如何编写正确的格式让 grunt usemin 重写我的 JS 图像参考链接以正确压缩图像？

Answer 1

我设法弄清楚了，答案来自这个线程https://github.com/yeoman/grunt-usemin/issues/235#issuecomment-33266949

我的 usemin 配置最终是这样的：

    usemin: {
        options: {
            assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images', '<%= config.dist %>/styles/fonts'],
            patterns: {
                js: [
                    [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
                ]
            }
        },
        html: ['<%= config.dist %>/{,*/}*.html'],
        css: ['<%= config.dist %>/styles/{,*/}*.css'],
        js: ['<%= config.dist %>/scripts/{,*/}*.js']
    },