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.

Uglify is for Javascript not CSS. Try using github.com/gruntjs/grunt-contrib-cssmin for your CSS — drzax
– drzax, Commented Mar 20, 2013 at 22:55
Thanks for the answers. Why the downvote? Obviously this is a stupid question, but that doesn't mean no-one else is going to have the same problem! — Richard
– Richard, Commented Mar 26, 2013 at 13:13

drzax · Accepted Answer · 2013-04-15 04:51:32Z

62

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

edited Apr 15, 2013 at 4:51

answered Mar 21, 2013 at 22:10

drzax

1,6751 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeFinity Over a year ago

Is it possible to emulate a separate 'dist' and 'dev' behavior like is done with uglifyjs? This way, the files are 'concatenated' but we can enable 'beautify' so that they are easy to debug - this works on uglifyjs, but I can't get it to work with cssmin, similar to this: uglify: { dist: { src: 'src/js/*.js', dest: 'js/script.min.js' }, dev: { options: { beautify: true, mangle: false, compress: false, preserveComments: 'all' },

jchadhowell · Accepted Answer · 2013-04-15 03:04:40Z

5

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

answered Apr 15, 2013 at 3:04

jchadhowell

1,1311 gold badge14 silver badges25 bronze badges

Comments

xudre · Accepted Answer · 2014-08-14 01:32:42Z

5

There is a similar solution called UglifyCSS (https://github.com/fmarcia/UglifyCSS):

shell: uglifycss "source.css" > "output.min.css"

Where behaves much like UglifyJS.

answered Aug 14, 2014 at 1:32

xudre

2,7812 gold badges22 silver badges19 bronze badges

Collectives™ on Stack Overflow

grunt: uglify css files with uglifyjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related