Grunt cssmin for .min.css files

Question

Am using grunt and cssmin to minify my css.

However, in my css assets folder, I have some css that has a .min.css extension. So when I run grunt, only files with .css in my source folder will be minified to be in the build folder. Those files that have .min.css in the source folder will be found in the build folder, but the .min extension will be lost. ie bootstrap.min.css will become bootstrap.css

My Gruntfile.js is as below

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        files: [{
            expand: true,
            src: '**/*.js',
            dest: 'resources/front/js',
            cwd: 'assets/front/js'
        }]
      }
    },
   cssmin: {
      minify: {
        expand: true,
        cwd: 'assets/front/css/',
        src: ['*.css', '*.min.css'],
        dest: 'resources/front/css/',
        ext: '.css'
      }
    }

    });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // Default task(s).
  grunt.registerTask('default', ['uglify','cssmin']);

};

Is there any way that the .min.css files can still be minified and be in the build folder and retain the correct '.min.css' extension?

So what's your question exactly? You've got '!*.min.css' which will exclude files with that extension, is that what the issue is? — Decade Moon, Feb 10 '14 at 10:47
Ops did not add my question in. See edits in question. Was wondering if there is any way to retain the .min.css extension when minifying those .min.css — kkh, Feb 10 '14 at 10:54
Don't use a minifier to copy already compressed files. Use grunt-contrib-copy to move already minified assets — nschonni, Feb 10 '14 at 14:26

score 2 · Accepted Answer · edited May 23 '17 at 12:24

EDIT

See this answer for the most control over file name renaming.

Try this:

cssmin: {
  minify: {
    files: [{
      expand: true,
      cwd: 'assets/front/css/',
      src: ['*.css', '!*.min.css'],
      dest: 'resources/front/css/',
      ext: '.css'
    }, {
      expand: true,
      cwd: 'assets/front/css/',
      src: ['*.min.css'],
      dest: 'resources/front/css/',
      ext: '.min.css'
    }]
  }
}

The first files block will minify only the *.css files and retain the .css extension of those files. The second files block will minify only the *.min.css files and retain the .min.css extension of those files.

yea that works. if the css filename is something like 'jquery1.8.3.min.css, how do i cater to that — kkh, Feb 10 '14 at 11:51

Peng Lin · Answer 2 · 2015-04-23T09:11:22.627

2

I use grunt-contrib-copy: just copy *.min.css to dest.

First of all,exclude all *.min.css files

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

Second,Copy all *.min.css from css folder as src to release/css folder as dest

copy:{
      main:{
            files:[{
                   // Copy *.min.css 
                   expand:true,
                   src:['css/**/*.min.css'],
                   dest:'release/'
                  }]
            }
      }

edited Apr 23 '15 at 09:11

answered Apr 22 '15 at 01:34

Peng Lin

131
4

1

I can't tell: are you thanking Decade Moon for a useful answer or noting your different solution? – Nathan Tuggy Apr 22 '15 at 01:54
i mean i resolve this problem by another way,i use grunt-contrib-copy,copy all *.min.css from src/ to dest/, Decade's is better than me :0 – Peng Lin Apr 22 '15 at 03:24
Your answer is a little abstract. Format it for better understanding. – Saba Apr 22 '15 at 11:47

Grunt cssmin for .min.css files

2 Answers2