如何让grunt usemin更新JS来引用我们修改过的图像? [英] How to let grunt usemin update the JS to reference our revved images?

问题描述

如何让grunt usemin更新JS来引用我们修改过的图像? 从yeoman Web应用程序生成器中，它仅重写css和html的链接，而没有js.

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

How to let grunt usemin update the JS to reference our revved images ? from the yeoman web app generator, it only rewrite links for css and html, but no js.

What if my JS file have some images need to be compressed, but cannot link :(

这是我当前的grunt.js部分

Here is my current parts of 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.

I used to add js: ['<%= config.dist %>/scripts/{,*/}*.js'] after usemin:css, but it gives me Warning: Unsupported pattern: js Use --force to continue.

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

How can I write a correct format to let grunt usemin rewrite my JS image reference link to correct compressed image?

推荐答案

我设法弄清楚了，答案来自该线程

I managed to figure this, the answer came from this thread https://github.com/yeoman/grunt-usemin/issues/235#issuecomment-33266949

我的usemin配置最终如下:

My usemin config ended up like this:

    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来引用我们修改过的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！