grunt: uglify css files with uglifyjs

Question

I'm using grunt to uglify my static files (using grunt v0.4.0). I have configured it to uglify one file, but I can't figure out how to get it to do two files - despite reading this question and the usage examples.

Here's what I have currently:

uglify: {
  options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
    mangle: true
  },
  build: {
    src: 'dist/main.js',
    dest: 'dist/main.min.js'
  }
}

I'd like to uglify dist/main.css as well. How can I add it? I tried this, following the usage examples:

uglify: {
  options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
    mangle: true
  },
  build: {
    files: {
      'dist/main.min.js': ['dist/main.js'],
      'dist/main.min.css': ['dist/main.css']
    }
  }
}

But this gives me the following error:

WARN: ERROR: Unexpected token: punc ({) [dist/main.css:7,41]
Warning: Uglification failed. Use --force to continue.
Aborted due to warnings.

Seems like it's choking on the first { - why would that happen? It is valid CSS.

Answer 1

Uglify is for Javascript not CSS. Try using http://github.com/gruntjs/grunt-contrib-cssmin to minify CSS using Grunt.