Naming multiple css files when minifying with Grunt

Question

I have multiple css files that I'm minifying, is there a way to keep each of the minified files the same name as their css file? So for example, billing_edit.css, checkout.css, error_page.css would minify into billing_edit.min.css, checkout.min.css, error_page.min.css. Theres a lot of css files and normally I know its better to combine them, but this is a situation where there are potentially conflicting styles. So in that case I want to avoid doing the below.

cssmin: {
      options: {
        compatibility: 'ie8'
      },
      dist: {
        files: {
          'stylesheets/billing_edit.min.css' : [
            'stylesheets/billing_edit.css'
          ],
          'stylesheets/checkout.min.css' : [
            'stylesheets/checkout.css'
          ],
          'stylesheets/error_page.min.css' : [
            'stylesheets/error_page.css'
          ],
        }
      }
    },

score 0 · Answer 1 · answered May 21 '16 at 00:42

For this, you can use multiple dist

cssmin: {
    options: {
       compatibility: 'ie8'
    },
    dist1: {
        files: {
            'stylesheets/billing_edit.min.css' : [
                'stylesheets/billing_edit.css'
            ]
        }
    },
    dist2: {
        files: {
            'stylesheets/checkout.min.css' : [
                'stylesheets/checkout.css'
            ]
        }
    }
},

etc.

Naming multiple css files when minifying with Grunt

1 Answers1