web-dev-qa-db-fra.com

Comment concaténer et réduire plusieurs fichiers CSS et JavaScript avec Grunt.js (0.3.x)

Remarque: cette question ne concerne que Grunt 0.3.x et a été laissée à titre de référence. Pour obtenir de l’aide sur la dernière version de Grunt 1.x, veuillez vous reporter à mon commentaire sous cette question.

J'essaie actuellement d'utiliser Grunt.js pour configurer un processus de construction automatique afin de concaténer puis de réduire au minimum les fichiers CSS et JavaScript.

J'ai réussi à concaténer et à réduire au minimum mes fichiers JavaScript, bien que chaque fois que je cours avec grognement, il semble simplement ajouter au fichier au lieu de les écraser.

En ce qui concerne le CSS minifier ou même concaténer, je n’ai pas encore réussi à le faire!

En termes de grognement des modules CSS, j'ai essayé d'utiliser consolidate-css, grunt-css & cssmin mais en vain. Impossible de comprendre comment les utiliser!

La structure de mon répertoire est la suivante (en tant qu’application typique de node.js):

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

Voici à quoi ressemble 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');

};

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

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

Mis à jour le 5 juillet 2016 - Passage de Grunt 0.3.x à Grunt 0.4.x ou 1.x

Grunt.js a déménagé dans une nouvelle structure en Grunt 0.4.x _ (le fichier s'appelle maintenant Gruntfile.js). S'il vous plaît voir mon projet open source (Grunt.js Skeleton ) pour l'aide à la configuration d'un processus de construction pour Grunt 1.x.

Passer de Grunt 0.4.x à Grunt 1.xne devrait pas introduire beaucoup de changements majeurs .

javascriptcssconcatenationminifygruntjs
96
Jasdeep Khalsa

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

Si vous faites cela, vous pouvez mettre toutes vos sources sous ./src et vos fichiers construits sous ./dest

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

Puis configurez votre tâche concat

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

Votre tâche min

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

La tâche intégrée min utilise UglifyJS, vous avez donc besoin d'un remplaçant. J'ai trouvé grunt-css très bien. Après l'avoir installé, chargez-le dans votre fichier grunt

grunt.loadNpmTasks('grunt-css');

Et puis le mettre en place

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

Notez que l'utilisation est similaire à la min intégrée.

Modifiez votre tâche default en

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

Maintenant, exécuter grunt produira les résultats souhaités.

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

Je veux mentionner ici une technique TRÈS intéressante qui est utilisée dans d’immenses projets tels que jQuery et Modernizr pour concaténer des choses.

Ces deux projets sont entièrement développés avec des modules requirejs (vous pouvez le voir dans leurs dépôts github), puis ils utilisent l'optimiseur requirejs comme un concaténateur très intelligent. La chose intéressante est que, comme vous pouvez le constater, ni jQuery ni Modernizr n’a besoin d’exiger du travail, et c’est parce qu’ils effacent le rituel syntatique des Requis afin de se débarrasser des Requins de leur code. Ils se retrouvent donc avec une bibliothèque autonome qui a été développée avec les modules requirejs! Grâce à cela, ils peuvent, entre autres avantages, créer des versions sur mesure de leurs bibliothèques.

Pour tous ceux qui sont intéressés par la concaténation avec l'optimiseur requirejs, consultez this post

Il existe également un petit outil qui résume tout le processus du processus: AlbanilJS

12
Augusto Altman Quaranta

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

Vous pouvez concattre votre 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;
    });
  });
};
10
Anshul

Vous n'avez pas besoin d'ajouter le paquet concat, vous pouvez le faire via cssmin comme ceci:

cssmin : {
      options: {
            keepSpecialComments: 0
      },
      minify : {
            expand : true,
            cwd : '/library/css',
            src : ['*.css', '!*.min.css'],
            dest : '/library/css',
            ext : '.min.css'
      },
      combine : {
        files: {
            '/library/css/app.combined.min.css': ['/library/css/main.min.css', '/library/css/font-awesome.min.css']
        }
      }
    }

Et pour js, utilisez uglify comme ceci:

uglify: {
      my_target: {
        files: {
            '/library/js/app.combined.min.js' : ['/app.js', '/controllers/*.js']
        }
      }
    }
3
Inc33

Je pense que c'est peut-être plus automatique, grognon tâche usemin prendre soin de faire tout ce travail pour vous, seulement besoin d'une configuration:

https://stackoverflow.com/a/33481683/1897196

0
Donald