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 pressed, but cannot link :(

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'
            }]
        }
    },...

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

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

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 pressed, but cannot link :(

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'
            }]
        }
    },...

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

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

• javascript
• node.js
• grunt-usemin

Share Improve this question Follow asked May 28, 2014 at 18:17 atom2uekiatom2ueki 83544 gold badges1515 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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

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