yeoman / generator-angular

Yeoman generator for AngularJS
http://yeoman.io
5.74k stars 1.45k forks source link

[Question] Configuring regex in usemin task to apply minifcation to srcset attribute #1385

Open brunocasarotti opened 7 years ago

brunocasarotti commented 7 years ago

I have the following configuration in my gruntfile:

// Performs rewrites based on filerev and the useminPrepare configuration
    usemin: {
      html: ['<%= yeoman.dist %>/{,*/}*.html'],
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
      options: {
        assetsDirs: [
          '<%= yeoman.dist %>',
          '<%= yeoman.dist %>/images',
          '<%= yeoman.dist %>/styles'
        ],
        patterns: {
          js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
        }
      }
    },

When I run my build task to dist it transforms this:

<img src="images/calculo.jpg" srcset="images/calculo.jpg 360w, images/calculo.jpg 830w" sizes="(min-width: 992px) 360px, calc(100vw - 30px)"
                        class="wp-post-image" alt="Cálculo Estrutural" width="360" height="180">

to this: <img src="images/calculo.47c12a85.jpg" srcset="images/calculo.jpg 360w, images/calculo.jpg 830w" sizes="(min-width: 992px) 360px, calc(100vw - 30px)" class="wp-post-image" alt="Cálculo Estrutural" width="360" height="180">

How can I also apply the same pattern that was applied to the src attribute in the srcset attribute in order to produce the following code: <img src="images/calculo.47c12a85.jpg" srcset="images/calculo.47c12a85.jpg 360w, images/calculo.47c12a85.jpg 830w" sizes="(min-width: 992px) 360px, calc(100vw - 30px)" class="wp-post-image" alt="Cálculo Estrutural" width="360" height="180">