Cette présentation vous propose de découvrir les possibilités offertes par Grunt, et de voir comment automatiser certaines tâches telles que la compilation des feuilles de styles, la concaténation et minification des fichiers JavaScript ou encore l'optimisation des images.
4. Démarrer un nouveau projet
Pour fonctionner Grunt a besoin de 2 fichiers
• package.json : liste les dépendances
nécessaires à l’exécution des différentes
tâches.
• gruntfile.js (ou gruntfile.coffee) : charge les
plugins et configure les tâches à exécuter.
5. Il se place à la racine du projet.
Créer package.json
Il doit obligatoirement renseigner
le nom et le numéro de version du projet.
{
"name": "Blend",
"version": "0.0.1"
}
6. Installer Grunt et ses plugins
$ npm install <plugin> --save-dev
• <plugin> est le nom du plugin à installer.
• --save-dev actualise automatiquement la liste
des dépendances.
Les plugins disponibles sont recensés sur :
http://gruntjs.com/plugins
exécuté à la racine du projet
7. Installer Grunt et ses plugins
// Grunt
$ npm install grunt --save-dev
// Valide la syntaxe CSS avec CSSLint
$ npm install grunt-contrib-csslint --save-dev
// Concatène et minifie les fichiers CSS
$ npm install grunt-contrib-cssmin --save-dev
// Valide la syntaxe JS avec JSHint
$ npm install grunt-contrib-jshint --save-dev
// Concatène les fichiers JS
$ npm install grunt-contrib-concat --save-dev
// Minifie les fichiers JS avec UglifyJS
$ npm install grunt-contrib-uglify --save-dev
// Optimise les images (.gif, .jpg, .png)
$ npm install grunt-contrib-imagemin --save-dev
8. Installer Grunt et ses plugins
Tous les plugins sont téléchargés et installés
dans le dossier node_modules.
9. Installer Grunt et ses plugins
{
"name": "Blend",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-csslint": "~0.1.2",
"grunt-contrib-cssmin": "~0.6.1",
"grunt-contrib-jshint": "~0.6.4",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.4",
"grunt-contrib-imagemin": "~0.3.0"
}
}
Et la liste des dépendances est mise à jour.
10. Créer gruntfile.js
Il est composé de 4 parties distinctes :
1. La configuration du projet ;
2. La configuration des tâches ;
3. Le chargement des plugins ;
4. Et l'exécution des tâches.
Il se place à la racine du projet.
12. La configuration du projet
module.exports = function(grunt) {
grunt.initConfig({
// Configuration du projet et des tâches
});
};
La méthode d'initialisation grunt.initConfig()
abrite les paramètres de configuration.
13. La configuration du projet
module.exports = function(grunt) {
grunt.initConfig({
// Import des données du projet
pkg: grunt.file.readJSON('package.json')
});
};
Les données projet et la liste des dépendances
sont importées dans la configuration de grunt.
14. La configuration des tâches
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
csslint: {
// Configuration de la tâche csslint
},
cssmin: {
// Configuration de la tâche cssmin
}
});
Les données de configuration d'une tâche sont
contenues dans une propriété du même nom.
15. La configuration des tâches
csslint: {
options: {
// Options de la tâche qui écrasent
celles par défaut.
},
},
cssmin: {
options: {
// Options de la tâche qui écrasent
celles par défaut.
},
}
Chaque tâche est dotée d’une propriété options
qui permet de surcharger les options par défaut.
16. csslint
Les options du plugin correspondent aux règles
de CSSLint (il faut donc s'y reporter pour en
connaître la signification).
Par défaut, toutes les règles retournent des
avertissements. Pour chaque option, il est
possible d'utiliser la valeur false pour ignorer la
règle ou 2 pour renvoyer une erreur.
19. jshint
Les options du plugin correspondent aux règles
de JSHint (il faut donc s'y reporter pour en
connaître la signification).
Par défaut, toutes les règles retournent des
avertissements. Pour chaque option, il est
possible d'utiliser la valeur false pour ignorer la
règle ou 2 pour renvoyer une erreur.
20. jshint
https://github.com/gruntjs/grunt-contrib-jshint
jshint: {
// Fichiers à vérifier
files: ['gruntfile.js', 'www/js/*.js'],
// Surcharge des options par défaut
options: {
eqeqeq: true,
es3: true,
indent: 2,
undef: true,
globals: {
jQuery: true
},
// Génération automatique d’un rapport XML
reporter: 'jslint',
reporterOutput: 'report/jshint.xml'
}
}
22. uglify
https://github.com/gruntjs/grunt-contrib-uglify
uglify: {
options: {
// La date et le nom des fichiers minifiés sont
insérés en commentaire en début de fichier
banner: '/* <%= grunt.template.today("dd-
mm-yyyy, HH:MM") %> n <%= concat.dist.src %>
*/n'
},
dist: {
files: {
// Fichier de destination
'www/js/script.min.js':
// Fichier minifié
['<%= concat.dist.dest %>']
}
}
}
24. Le chargement des plugins
grunt.initConfig({
…
});
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
25. L’exécution des tâches
// Tâche par défaut
grunt.registerTask('default',
['csslint',
'cssmin',
'jshint',
'concat',
'uglify',
'imagemin']);
$ grunt
Elles sont exécutées grâce à la commande :
exécuté à la racine du projet
26. L’exécution des tâches
// Tâche personnalisée pour le développement
grunt.registerTask('dev',
['csslint', 'cssmin',
'jshint', 'concat',
'uglify']);
// Tâche personnalisée pour la mise en production
grunt.registerTask('prod', ['imagemin']);
$ grunt dev
$ grunt prod
Elles sont exécutées grâce aux commandes :
27. Forcer l’exécution des tâches
$ grunt dev --force
Lorsque des avertissements sont renvoyés par csslint
ou jshint, l’exécution du processus global s’arrête.
Pour passer outre et forcer l’exécution de toutes les
tâches sans tenir compte des avertissements, il faut
passer l’option --force.