web-dev-qa-db-fra.com

grunt: uglify fichiers css avec uglifyjs

J'utilise grunt pour uglifier mes fichiers statiques (en utilisant grunt v0.4.0). Je l'ai configuré pour uglifier un fichier, mais je ne sais pas comment le faire faire deux fichiers - malgré la lecture de cette question et le exemples d'utilisation .

Voici ce que j'ai actuellement:

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

Je voudrais uglifier dist/main.css ainsi que. Comment puis-je l'ajouter? J'ai essayé cela, en suivant les exemples d'utilisation:

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

Mais cela me donne l'erreur suivante:

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

On dirait que ça s'étouffe le premier { - pourquoi cela arriverait-il? C'est du CSS valide.

gruntjs
29
Richard

Uglify est pour Javascript et non CSS. Essayez d'utiliser http://github.com/gruntjs/grunt-contrib-cssmin pour réduire CSS à l'aide de Grunt.

60
drzax

Uglify est pour Javascript uniquement, mais YUI Compressor peut faire à la fois Javascript et CSS: YUI Compressor

5
jchadhowell

Il existe une solution similaire appelée UglifyCSS ( https://github.com/fmarcia/UglifyCSS ):

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

Où se comporte un peu comme UglifyJS .

3
xudre