Grunt cssmin for .min.css files

0
votes

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?

2
gruntjsgrunt-contrib-cssmin
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
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
Don't use a minifier to copy already compressed files. Use grunt-contrib-copy to move already minified assets – nschonni

2 Answers

2
votes

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.

2
votes

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/'
                  }]
            }
      }