CODEWITHSUNDEEP
gruntjsgrunt-contrib-cssmin
kkh
kkh

Reputation: 4869

Grunt cssmin for .min.css files

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?

Upvotes: 0

Views: 9549

Answers (2)

Peng Lin
Peng Lin

Reputation: 131

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

Upvotes: 2

Decade Moon
Decade Moon

Reputation: 34306

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.

Upvotes: 2

Related Questions