Benoit VRIGNAUD

Développement et conception de logiciels sur mesure.

Accueil > Développement > Grunt

Grunt

jeudi 25 juillet 2013 diaspora*

Dans cet article, je vais essayer de vous montrer, le plus simplement possible, une utilisation (la mienne) de Grunt.

Prérequis

Grunt 0.4.x nécessite Node.js >= 0.8.0.

Installation de grunt-cli : $ sudo npm install -g grunt-cli

Préparation du projet

2 fichiers sont nécessaires : package.json et Gruntfile.js.

package.json

{
 "name": "NomDeMonProjet",
 "version": "0.1.0",
 "devDependencies": {
   "grunt": "~0.4",
   "grunt-contrib-uglify": "~0.2",
   "grunt-contrib-mincss": "~0.4",
   "grunt-contrib-jshint": "~0.6"
 }
}

$ npm install va télécharger les fichiers nécessaires pour utiliser grunt.

Gruntfile.js

module.exports = function(grunt) {

   grunt.initConfig({
       // Metadata.
       pkg: grunt.file.readJSON('package.json'),
       datetime: Date.now(),
        jshint: {
                options: {
                        '-W099': true,
                },
                all: ['static/js/*.js']
        },
        clean: {
                     src: [
                        'www/static/css/styles.css',
                        'www/static/js/fichier1.js',
                        'www/static/js/fichier2.js',
                        'www/static/js/fichier3.js',
                ]
            },
        mincss: {
              'frontend-css': {
                files: {
                  'www/static/css/styles.css': ['static/css/styles.css']
                }
              }
            },
       uglify: {
           'options': {
               mangle: {toplevel: true},
               squeeze: {dead_code: false},
               codegen: {quote_keys: true}
           },
           'monprojet-js': {
                files: {
                        'www/static/js/fichier1.js': ['static/js/fichier1.js'],
                        'www/static/js/fichier2.js': ['static/js/fichier2.js'],
                      }
           }
       },

   });

   // Defining a custom task to delete previously generated file before generate them
   grunt.registerTask('clean', 'Clean the previously generated files', function() {
            var files = grunt.config('clean').src;
         
            for (var i = 0; i < files.length; i++) {
              grunt.file.delete(files[i]);
            }
   });

   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-mincss');
   grunt.loadNpmTasks('grunt-contrib-uglify');

   grunt.registerTask('default', [
        'jshint',        // Contrôle du code
        'clean',        // Nettoyage des répertoires de destination
        'mincss',        // Minimisation du css
        'uglify',        // Minimisation des js
   ]);

};

Utilisation

$ grunt

Quelques plugins intéressants

- uglify : réduction des js
- jsHint : contrôle du code
- QUnit : tests unitaires
- cssmin : Compress CSS files


Voir en ligne : Grunt

Un message, un commentaire ?

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.