Your SlideShare is downloading. ×
0
Automatisez
vos tâches répétitives avec
Corinne Schillinger BLEND WEB MIX 2013
Corinne Schillinger
@schillinger
Pré-requis
v0.8.0 min
grunt-cli
$ npm install -g grunt-cli
en mode admin
Démarrer un nouveau projet
Pour fonctionner Grunt a besoin de 2 fichiers
• package.json : liste les dépendances
nécessaires...
Il se place à la racine du projet.
Créer package.json
Il doit obligatoirement renseigner
le nom et le numéro de version du...
Installer Grunt et ses plugins
$ npm install <plugin> --save-dev
• <plugin> est le nom du plugin à installer.
• --save-dev...
Installer Grunt et ses plugins
// Grunt
$ npm install grunt --save-dev
// Valide la syntaxe CSS avec CSSLint
$ npm install...
Installer Grunt et ses plugins
Tous les plugins sont téléchargés et installés
dans le dossier node_modules.
Installer Grunt et ses plugins
{
"name": "Blend",
"version": "0.0.1",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contr...
Créer gruntfile.js
Il est composé de 4 parties distinctes :
1. La configuration du projet ;
2. La configuration des tâches ;
...
La fonction globale
module.exports = function(grunt) {
// Code Grunt
};
La configuration du projet
module.exports = function(grunt) {
grunt.initConfig({
// Configuration du projet et des tâches
}...
La configuration du projet
module.exports = function(grunt) {
grunt.initConfig({
// Import des données du projet
pkg: grunt...
La configuration des tâches
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
csslint: {
// Configuration de la ...
La configuration des tâches
csslint: {
options: {
// Options de la tâche qui écrasent
celles par défaut.
},
},
cssmin: {
op...
csslint
Les options du plugin correspondent aux règles
de CSSLint (il faut donc s'y reporter pour en
connaître la significa...
csslint
https://github.com/gruntjs/grunt-contrib-csslint
csslint: {
// Surcharge des options par défaut
options: {
'adjoin...
cssmin
https://github.com/gruntjs/grunt-contrib-mincss
cssmin: {
combine: {
files: {
// Fichier de destination
'www/css/st...
jshint
Les options du plugin correspondent aux règles
de JSHint (il faut donc s'y reporter pour en
connaître la significati...
jshint
https://github.com/gruntjs/grunt-contrib-jshint
jshint: {
// Fichiers à vérifier
files: ['gruntfile.js', 'www/js/*....
concat
https://github.com/gruntjs/grunt-contrib-concat
concat: {
options: {
// Caractère à utiliser pour séparer les fichi...
uglify
https://github.com/gruntjs/grunt-contrib-uglify
uglify: {
options: {
// La date et le nom des fichiers minifiés son...
imagemin
https://github.com/gruntjs/grunt-contrib-imagemin
imagemin: {
dynamic: {
files: [{
// Mode de ciblage dynamique
e...
Le chargement des plugins
grunt.initConfig({
…
});
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-...
L’exécution des tâches
// Tâche par défaut
grunt.registerTask('default',
['csslint',
'cssmin',
'jshint',
'concat',
'uglify...
L’exécution des tâches
// Tâche personnalisée pour le développement
grunt.registerTask('dev',
['csslint', 'cssmin',
'jshin...
Forcer l’exécution des tâches
$ grunt dev --force
Lorsque des avertissements sont renvoyés par csslint
ou jshint, l’exécut...
Surveiller les fichiers
https://github.com/gruntjs/grunt-contrib-watch
// Permet d’exécuter des tâches prédéfinies si les
f...
Surveiller les fichiers
https://github.com/gruntjs/grunt-contrib-watch
watch: {
// Fichiers à surveiller
files: ['www/js/li...
Surveiller les fichiers
https://github.com/gruntjs/grunt-contrib-watch
grunt.loadNpmTasks('grunt-contrib-watch');
Chargemen...
Merci !
des questions ?
Corinne Schillinger @schillinger
BLEND WEB MIX 2013
Upcoming SlideShare
Loading in...5
×

Automatisez vos tâches répétitives avec Grunt (Blend 2013)

4,712

Published on

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.

Published in: Technology
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,712
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
35
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "Automatisez vos tâches répétitives avec Grunt (Blend 2013)"

  1. 1. Automatisez vos tâches répétitives avec Corinne Schillinger BLEND WEB MIX 2013
  2. 2. Corinne Schillinger @schillinger
  3. 3. Pré-requis v0.8.0 min grunt-cli $ npm install -g grunt-cli en mode admin
  4. 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. 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. 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. 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. 8. Installer Grunt et ses plugins Tous les plugins sont téléchargés et installés dans le dossier node_modules.
  9. 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. 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.
  11. 11. La fonction globale module.exports = function(grunt) { // Code Grunt };
  12. 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. 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. 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. 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. 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.
  17. 17. csslint https://github.com/gruntjs/grunt-contrib-csslint csslint: { // Surcharge des options par défaut options: { 'adjoining-classes': false, 'empty-rules': 2, // Génération automatique d’un rapport XML formatters: [{ id: 'csslint-xml', dest: 'report/csslint.xml' }] }, // Fichiers à vérifier src: ['www/css/*.css'] }
  18. 18. cssmin https://github.com/gruntjs/grunt-contrib-mincss cssmin: { combine: { files: { // Fichier de destination 'www/css/style.css': // Fichiers à concaténer ['www/css/normalize.css', 'www/css/typography.css', 'www/css/layout.css', 'www/css/element.css', 'www/css/js.css', 'www/css/ie.css' ] } } }
  19. 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. 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' } }
  21. 21. concat https://github.com/gruntjs/grunt-contrib-concat concat: { options: { // Caractère à utiliser pour séparer les fichiers concaténés separator: ';' }, dist: { // Fichiers à concaténer src: ['www/js/library.js', 'www/js/behaviour.js'], // Fichier de destination dest: 'www/js/script.js' } }
  22. 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 %>'] } } }
  23. 23. imagemin https://github.com/gruntjs/grunt-contrib-imagemin imagemin: { dynamic: { files: [{ // Mode de ciblage dynamique expand: true, // Dossier contenant les sources cwd: 'www/img/', // Fichiers à prendre en compte src: ['*.{png,jpg,gif}'], // Dossier de destination dest: 'www/img' }] } }
  24. 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. 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. 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. 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.
  28. 28. Surveiller les fichiers https://github.com/gruntjs/grunt-contrib-watch // Permet d’exécuter des tâches prédéfinies si les fichiers surveillés sont ajoutés, modifiés ou supprimés. $ npm install grunt-contrib-watch --save-dev Installation du plugin
  29. 29. Surveiller les fichiers https://github.com/gruntjs/grunt-contrib-watch watch: { // Fichiers à surveiller files: ['www/js/library.js', 'www/js/behaviour.js', 'www/css/normalize.css', 'www/css/typography.css', 'www/css/layout.css', 'www/css/element.css', 'www/css/js.css', 'www/css/ie.css'], // Tâche à exécuter tasks: ['csslint', 'cssmin', 'jshint', 'concat'] } Définition de la tâche
  30. 30. Surveiller les fichiers https://github.com/gruntjs/grunt-contrib-watch grunt.loadNpmTasks('grunt-contrib-watch'); Chargement du plugin grunt.registerTask('dev', ['csslint', 'cssmin', 'jshint', 'concat', 'watch']); Exécution de la tâche
  31. 31. Merci ! des questions ? Corinne Schillinger @schillinger BLEND WEB MIX 2013
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×