Comment concaténer et minifier plusieurs fichiers CSS et JavaScript avec Grunt.js

Question

Note : Cette question n'est pertinente que pour Grunt 0.3.x et a été laissée en référence. Pour obtenir de l'aide sur la dernière version de Grunt 0.4.x, veuillez consulter mon commentaire sous cette question.

J'essaie actuellement d'utiliser Grunt.js pour mettre en place un processus de construction automatique permettant de concaténer puis de réduire les fichiers CSS et JavaScript.

J'ai réussi à concaténer et à réduire mes fichiers JavaScript, mais à chaque fois que j'exécute Grunt, il semble simplement ajouter au fichier au lieu de l'écraser.

En ce qui concerne la réduction ou même la concaténation des CSS, je n'ai pas encore réussi à le faire !

En ce qui concerne les modules CSS de grunt, j'ai essayé d'utiliser consolidate-css , grunt-css & cssmin mais sans succès. Je n'arrivais pas à comprendre comment les utiliser !

Ma structure de répertoire est la suivante (étant une application node.js typique) :

• app.js
• grunt.js
• /public/index.html
• /public/css/[divers fichiers css]
• /public/js/[divers fichiers javascript]

Voici à quoi ressemble actuellement mon fichier grunt.js dans le dossier racine de mon application :

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    concat: {
      dist: {
        src: 'public/js/*.js',
        dest: 'public/js/concat.js'
      }
    },
    min: {
      dist: {
        src: 'public/js/concat.js',
        dest: 'public/js/concat.min.js'
      }
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        node: true
      },
      globals: {
        exports: true,
        module: false
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat min');

};

Pour résumer, j'ai besoin d'aide pour deux questions :

1. Comment concaténer et minifier tous mes fichiers css sous le dossier /public/css/ dans un seul fichier, disons main.min.css
2. Pourquoi grunt.js continue-t-il à ajouter des éléments aux fichiers javascript concaténés et minifiés ? concat.js y concat.min.js sous /public/js/ au lieu de les écraser à chaque fois que la commande grunt est exécuté ?

---

Mis à jour le 20 juin 2013 - Mise à niveau de Grunt 0.3.x vers Grunt 0.4.x

Grunt.js a déménagé dans une nouvelle structure à Grunt 0.4.x (le fichier s'appelle maintenant Gruntfile.js ). Veuillez consulter mon projet open source Squelette Grunt.js pour vous aider à mettre en place un processus de construction pour Grunt 0.4.x .

Answer 1

Concat.js est inclus dans le fichier concat les fichiers sources de la tâche public/js/*.js . Vous pourriez avoir une tâche qui supprime concat.js (si le fichier existe) avant de concaténer à nouveau, passer un tableau pour définir explicitement les fichiers que vous voulez concaténer et leur ordre, ou changer la structure de votre projet.

Dans ce dernier cas, vous pouvez placer toutes vos sources sous la rubrique ./src et vos fichiers construits sous ./dest

src
├── css
│   ├── 1.css
│   ├── 2.css
│   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Ensuite, configurez votre concat tâche

concat: {
  js: {
    src: 'src/js/*.js',
    dest: 'dest/js/concat.js'
  },
  css: {
    src: 'src/css/*.css',
    dest: 'dest/css/concat.css'
  }
},

Votre min tâche

min: {
  js: {
    src: 'dest/js/concat.js',
    dest: 'dest/js/concat.min.js'
  }
},

L'intégration min utilise UglifyJS, vous avez donc besoin d'un remplacement. J'ai trouvé grunt-css pour être assez bon. Après l'avoir installé, chargez-le dans votre fichier grunt

grunt.loadNpmTasks('grunt-css');

Et ensuite le mettre en place

cssmin: {
  css:{
    src: 'dest/css/concat.css',
    dest: 'dest/css/concat.min.css'
  }
}

Remarquez que l'utilisation est similaire à celle du min intégré.

Changez votre default tâche à

grunt.registerTask('default', 'concat min cssmin');

Maintenant, en courant grunt produira les résultats que vous souhaitez.

dest
├── css
│   ├── concat.css
│   └── concat.min.css
└── js
    ├── concat.js
    └── concat.min.js

Answer 2

Je suis d'accord avec la réponse ci-dessus. Mais voici une autre méthode de compression CSS.

Vous pouvez concaténer vos CSS en utilisant Compresseur YUI :

module.exports = function(grunt) {
  var exec = require('child_process').exec;
   grunt.registerTask('cssmin', function() {
    var cmd = 'java -jar -Xss2048k '
      + __dirname + '/../yuicompressor-2.4.7.jar --type css '
      + grunt.template.process('/css/style.css') + ' -o '
      + grunt.template.process('/css/style.min.css')
    exec(cmd, function(err, stdout, stderr) {
      if(err) throw err;
    });
  });
};