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
- Tutoriel Grunt : Découverte de Grunt, de Grafikart
- Grunt for People Who Think Things Like Grunt are Weird and Hard, de Chris Coyier