Question

如何让grunt usemin更新JS以引用我们的转换图像？从yeoman网络应用程序生成器，它只重写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'
            }]
        }
    },...

我曾经在usemin：css之后添加js: ['<%= config.dist %>/scripts/{,*/}*.js']，但它给了我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']
    },

如何让grunt usemin更新JS以引用我们的转换图像？

1 个答案: