cssgruntjsgrunt-contrib-cssmin

Grunt, css min to concat and minify all css


I have a bunch of various css from plugins and separate style sheets I am using, and I am trying to build a task that will combine and minify all of them. Right now I'm trying to do this with cssmin, I am not sure if I am on the right path, as this is my first time trying this, but here is what I am trying.

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

The idea is that it will take all css and min.css files in my css folder and combine them into 1 output.css then minify that build/css as a min.css file. I am not too sure if this is how this is suppose to work but this is my first attempt in trying so. The basic idea is combine and minify everything into 1 file in the bottom of my tasks (after I have auto prefixed and used uncss to strip bootstrap). I would appreciate any guidance, is this the right direction with this? This doesn't seem to work correctly, so would appreciate any help.

Thanks for reading!


Solution

  • I am not sure... but this works for me, and only have to include cssmin task in my grunt.registerTask line of code. It minifies all my autoprefixed .css, except the already minified versions and combine them into one big minified stylesheet. Hope it helps ^^

    cssmin: {
      minify: {
        files: [{
          expand: true,
          cwd: 'src/styles',
          src: ['**/*.css', '!**/*.min.css'],
          dest: 'public/assets/styles',
          ext: '.min.css'
        }]
      },
      options: {
        shorthandCompacting: false,
        roundingPrecision: -1
      },
      combine: {
        files: {
          'public/assets/styles/style.css': ['!public/assets/styles/**/*.min.css', 'public/assets/styles/**/*.css']
        }
      }
    }