How to disable grunt-contrib-cssmin combine?

Question

I have three files:

'selectize.default.css'
'selectize.pagination.css'
'selectize.patch.css'

and I want to minimize them.

Here is my gruntfile:

cssmin: {
     min: {
         files: [{
             expand: true,
             cwd: 'css',
             src: [
               'selectize.default.css',
               'selectize.pagination.css',
               'selectize.patch.css',
               '!*.min.css'
             ],
             dest: 'release/css',
             ext: '.min.css'
         }]
     }
}

Problem is there is only one file named selectize.min.css I don't want it to minimize only one file. How can I minimize all three of them?

Codger

What version of cssmin are you using? Looks like it's outdated. See the docs, which specify a different way of configuring the plugin: github.com/gruntjs/grunt-contrib-cssmin – Rothermere

no,i checked package.json and version is 0.12.2 – Codger

Answer 1

If I understand your question correctly, you want to minimize the files, but not combine them into one? In that case, my recommendation would be to make separate calls for each file. e.g.:

cssmin: {
     default: {
         files: [{
             expand: true,
             cwd: 'css',
             src: [
               'selectize.default.css',
             ],
             dest: 'release/css',
             ext: '.min.css'
         }]
     },
     pagination: {
         files: [{
             expand: true,
             cwd: 'css',
             src: [
               'selectize.pagination.css',
             ],
             dest: 'release/css',
             ext: '.min.css'
         }]
     },
     patch: {
         files: [{
             expand: true,
             cwd: 'css',
             src: [
               'selectize.patch.css',
             ],
             dest: 'release/css',
             ext: '.min.css'
         }]
     },
 }

It probably isn't the cleanest way, but it will do what you want. I haven't test this code, so be warned I don't know that it works.

Navarrete

Yes,you know me,it's works very well when css file is less. but when css file is more than 10 and more,programmer do not like that. – Codger

lol @PengLin I want to frame your comment and put it on my wall. – Phiphenomenon

Answer 2

So this ticket is kind of old, but as Peng Lin so eloquently stated above, the selected answer is inadequate for most programmers since it requires too much manual adjustment. It's not maintainable.

Grunt has a way of specifying where the extension dot is in file names. By default, it's set to the first one which effectively changes the file names on output. The property is called extDot. You can read about it Here if you want.

If you set it to last, it will preserve your file names and your original example will work.

Example:

cssmin: {
  min: {
     files: [{
         expand: true,
         cwd: 'css',
         src: [
           'selectize.default.css',
           'selectize.pagination.css',
           'selectize.patch.css',
           '!*.min.css'
         ],
         dest: 'release/css',
         ext: '.min.css',
         extDot: 'last'   // Extensions in filenames begin after the last dot
     }]
 }  }

Hope this helps someone in the future.

Reckon