Grunt - noelno/dovelei GitHub Wiki

Grunt ?

Grunt est un task runner en Javascript : il permet de créer une liste de tâches et les exécuter séquentiellement.

Par exemple il permet de :

  • linter son code source
  • concaténer et minifier des feuilles de script ou de style
  • autoprexifer certaines propriétés CSS
  • faire des commits automatiques sur Git
  • automatiser l'incrémentation des numéros de version des assets
  • lancer les tests unitaires
  • optimiser des images
  • surveiller des fichiers et lancer des tâches quand ceux-ci sont modifiés

Utilisation

Installation

(nécessite d’installer node.js)

npm install -g grunt-cli

Nouveau package.json

npm init (dans le dossier de travail), puis éditer le fichier pour ne conserver que ce qui est nécessaire (au minimum name et version)

Ajouter une dépendance dans package.json

 npm install grunt --save-dev

Penser à ajouter le répertoire node_modules à .gitignore

Écrire les tâches

Créer un fichier gruntfile.js à la racine du projet, et y écrire :

module.exports = function(grunt){
   
}

Pour exécuter une tâche, il faut d'abord installer le plugin qui permet de réaliser cette tache.

Installer des plugins

cf. https://gruntjs.com/plugins pour chercher un plugin.
Les instructions d'installation sont sur la page de présentation de chaque plugin. Par exemple le plugin grunt-contrib-concat permet de concaténer des feuilles.
Pour l'installer on lance en ligne de commande :

npm install grunt-contrib-concat --save-dev

Le plugin sera ajouté aux dépendances dans package.json.

Récupérer dans la doc la configuration du plugin et la coller dans gruntfile.js.

Par exemple pour le plugin grunt-contrib-concat :

module.exports = function(grunt){

    // Project configuration. 
    grunt.initConfig({
       concat: {
             dist: {
                 src: ['lib/js/*.js'],
                 dest: 'lib/js/min.js'
             }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');      

}

Puis en ligne de commande, lancer la tache avec l'instruction grunt concat:dist (ou grunt concat dans le cas où il n'y aurait qu'une seule tâche liée à concat, ce qui est le cas ici : il n'y a que dist).
dist est le nom de la tâche, utilisée par convention. On aurait pu en utiliser un autre, par exemple 'fusion'.

Note : la ligne grunt.loadNpmTasks peut être omise si vous installez le plugin load-grunt-tasks.

Désinstaller un plugin

npm uninstall nom-du-plugin --save

Regrouper différentes tâches en une seule

module.exports = function(grunt){
    
    require('load-grunt-tasks')(grunt);
    
    // Project configuration. 
    grunt.initConfig({
       concat: {
             dist: {
                 src: ['lib/js/*.js'],
                 dest: 'lib/js/min.js'
             }
        },
        uglify: {
            minification: {
                files: {
                    'lib/js/build.js': ['lib/js/*.js']
                }
            }
        }
          
    });
    grunt.registerTask(‘default’, [‘concat’, ‘uglify’]);
}

registerTask() permet de regrouper plusieurs taches en une seule. Il suffit ensuite de lancer commande grunt, ce qui lancera la tâche par defaut - c'est à dire la tache default.

Paths

  • Pour récupérer tous les fichiers js : ['mon-repertoire/*.js']
  • Pour récupérer tous les fichiers js mais en chargeant un des js en premier : ['mon-repertoire/jquery.min.js', 'mon-repertoire/*.js']
  • Pour regarder dans tous les dossiers : ['**/*.js']
  • Pour ignorer une source : ['js/*.js', '!js/*.min.js'] //va prendre tous les fichiers js sauf ceux terminant par min.js

Watch

Plutôt que de relancer manuellement grunt à chaque modification d’un fichier, on peut utiliser le plugin watch qui permet de surveiller certains fichiers et de lancer automatiquement certaines tâches dès qu’un fichier surveillé est modifié.

module.exports = function(grunt){
    
    require('load-grunt-tasks')(grunt);
    
    // Project configuration. 
    grunt.initConfig({
        uglify: {
            dist: {
                files: {
                    'lib/js/dist.min.js': ['lib/js/*.js','!lib/js/*.min.js']
                }
            }
        },
        cssmin: {
            combine: {
                files: {
                    'lib/css/dist.min.css': ['lib/css/*.css','!lib/css/*.min.css']
                }
            }
        },
        watch: {
            js: {
                files: ['lib/js/*.js','!lib/js/*.min.js'],
                tasks: ['uglify'],
                options: { spawn: false }
            },
            css: {
                files: ['lib/css/*.css','!lib/css/*.min.css'],
                tasks: ['cssmin'],
                options: { spawn: false }
            }
        }
          
    });
 
grunt.registerTask('default', ['uglify','cssmin']);   
}

Si je lance grunt watch et que je modifie un fichier css, cssmin sera lancé à chaque enregistrement des modifications.
L'option livereload permet au passage de rafraîchir la page dans le navigateur.

Plugins intéressants

jshint : vérifie la validité du js

npm install grunt-contrib-jshint --save-dev

uglify : concatène et minifie le js

npm install grunt-contrib-uglify --save-dev

Conseil : sur Angular, ajouter l’option mangle:false pour empêcher le renommage des dépendances par uglify au moment de la minification.

cssmin : minifie le css

npm install grunt-contrib-cssmin --save-dev

watch : surveille certaines sources et lance une ou plusieurs tâches dès qu'elles sont modifiées

npm install grunt-contrib-watch --save-dev

phpcs : linter PHP avec conventions d'écriture PSR

npm install grunt-phpcs --save-dev

Sources