Grunt, css min to concat and minify all css

Question

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!

The thing that might break is the sorting in which your css files are concat. As you load them using `*` they are sorted by the OS or by `cssmin` and then concat, which might not be the order you load them in you document. — t.niese, Jan 03 '15 at 18:07
What problems are you seeing? You need to be more specific for us to help you. — Jordan Kasper, Jan 03 '15 at 18:13

score 4 · Accepted Answer · answered Jun 08 '15 at 10:05

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

Hi, How Can I remove the min files after they was combined? – Hector Oct 10 '17 at 15:22 — Hector, Oct 10 '17 at 15:22
Hi. I'd suggest using `grunt-clean` package in this case. – CreativeZoller Oct 11 '17 at 14:56 — CreativeZoller, Oct 11 '17 at 14:56

Tonatio · Answer 2 · 2016-03-17T14:13:52.677

3

minify task is not necessary. When you concatenate several files, cssmin minifies the content automatically.

cssmin: {
  options: {
    shorthandCompacting: false,
    roundingPrecision: -1
  },
  combine: {
    files: {
      'css/output.min.css': ['css/*.css', '!css/*.min.css']
    }
  }
}

edited Mar 17 '16 at 14:13

answered Mar 17 '16 at 14:08

Tonatio

4,026
35
24

Grunt, css min to concat and minify all css

2 Answers2