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.

Answer 2

Uglify is for Javascript only, but YUI Compressor can do both Javascript and CSS: YUI Compressor