CODEWITHSUNDEEP
gruntjsbundling-and-minificationgrunt-useminpicturefill
Matt Rowles
Matt Rowles

Reputation: 8050

usemin to replace all occurences of new rev image, not just inside img src= value

I am trying to use the picturefill plugin for a responsive image but the usemin plugin doesn't seem to pick up any url's outside of <img src= tags. Is there a way to force it to change every occurrence of an original image with the new minified/cache-blasted ones, as per below:

before grunt build

// This works
<img src="images/main.jpg" />

<picture>

    // This doesn't work
    <source srcset="images/main.jpg" media="(min-width: 1200px)" />
    <source srcset="images/main-lg.jpg" media="(min-width: 992px)" />
    <source srcset="images/main-md.jpg" media="(min-width: 768px)" />
    <source srcset="images/main-sm.jpg" media="(min-width: 1px)" />

    // This doesn't work
    <img srcset="images/main.jpg" alt="Epic punting">

</picture>

after grunt build

// Updated
<img src="images/b1kajsmf.main.jpg" />

<picture>

    // Not updated
    <source srcset="images/main.jpg" media="(min-width: 1200px)" />
    <source srcset="images/main-lg.jpg" media="(min-width: 992px)" />
    <source srcset="images/main-md.jpg" media="(min-width: 768px)" />
    <source srcset="images/main-sm.jpg" media="(min-width: 1px)" />

    // Not updated
    <img srcset="images/main.jpg" alt="Epic punting">

</picture>

Here is my gruntfile code if it helps:

rev: {
    dist: {
        files: {
            src: [
                '<%= yeoman.dist %>/public/scripts/{,*/}*.js',
                '<%= yeoman.dist %>/public/styles/{,*/}*.css',
                '<%= yeoman.dist %>/public/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ]
        }
    }
},

useminPrepare: {
    html: ['<%= yeoman.app %>/views/index.html',
           '<%= yeoman.app %>/views/index.jade'],
    options: {
        dest: '<%= yeoman.dist %>/public'
    }
},

usemin: {
    html: ['<%= yeoman.dist %>/views/{,*/}*.html',
           '<%= yeoman.dist %>/views/{,*/}*.jade'],
    css: ['<%= yeoman.dist %>/public/styles/{,*/}*.css'],
    options: {
        assetsDirs: ['<%= yeoman.dist %>/public']
    }
},

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

Upvotes: 2

Views: 584

Answers (1)

Aaron
Aaron

Reputation: 846

Usemin now supports blockReplacements. This allows you to define your own custom replacements for e.g. srcset.

See https://github.com/yeoman/grunt-usemin/pull/337 and the Usemin readme.

Upvotes: 1

Related Questions