SlideShare une entreprise Scribd logo

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

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.

1  sur  31
Télécharger pour lire hors ligne
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 à l’exécution des différentes
tâches.
• gruntfile.js (ou gruntfile.coffee) : charge les
plugins et configure les tâches à exécuter.
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"
}
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

Recommandé

SonarQube Manuel Automatisation d'analyse ANT JENKINS/Hudson
SonarQube Manuel Automatisation d'analyse ANT JENKINS/HudsonSonarQube Manuel Automatisation d'analyse ANT JENKINS/Hudson
SonarQube Manuel Automatisation d'analyse ANT JENKINS/Hudsonxmacina
 
Gwt jetty et sources de données
Gwt   jetty et sources de donnéesGwt   jetty et sources de données
Gwt jetty et sources de donnéesFranck SIMON
 
AFUP Aix/Marseille - 16 mai 2017 - Open API
AFUP Aix/Marseille - 16 mai 2017 - Open APIAFUP Aix/Marseille - 16 mai 2017 - Open API
AFUP Aix/Marseille - 16 mai 2017 - Open APIRomain Cambien
 
PHP Composer : Pourquoi ? Comment ? Et plus ...
PHP Composer : Pourquoi ? Comment ? Et plus ...PHP Composer : Pourquoi ? Comment ? Et plus ...
PHP Composer : Pourquoi ? Comment ? Et plus ...Romain Cambien
 
CI, CD, pipelines, conteneurs : la cohabitation est elle possible ?
CI, CD, pipelines, conteneurs : la cohabitation est elle possible ?CI, CD, pipelines, conteneurs : la cohabitation est elle possible ?
CI, CD, pipelines, conteneurs : la cohabitation est elle possible ?Membré Guillaume
 

Contenu connexe

Tendances

Retour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesRetour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesVincent Composieux
 
JCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratiqueJCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratiqueRossi Oddet
 
Partie1 TypeScript
Partie1 TypeScriptPartie1 TypeScript
Partie1 TypeScriptHabib Ayad
 
Git pour les (pas si) nuls
Git pour les (pas si) nulsGit pour les (pas si) nuls
Git pour les (pas si) nulsMalk Zameth
 
Git ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versionGit ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versiongoldoraf
 
Git utilisation quotidienne
Git   utilisation quotidienneGit   utilisation quotidienne
Git utilisation quotidienneSylvain Witmeyer
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIHugo Hamon
 
Présentation du versioning avec Git
Présentation du versioning avec GitPrésentation du versioning avec Git
Présentation du versioning avec Gitmsadouni
 
Découvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentraliséDécouvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentraliséECAM Brussels Engineering School
 
Installation et configuration d'openbravo
Installation et configuration d'openbravoInstallation et configuration d'openbravo
Installation et configuration d'openbravoSoumia Brabije
 
Comprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractibleComprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractibleThierry Gayet
 
Migration d'une base de code subversion vers git
Migration d'une base de code subversion vers gitMigration d'une base de code subversion vers git
Migration d'une base de code subversion vers gitGeoffrey Bachelet
 
Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...ECAM Brussels Engineering School
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Philippe Sfeir
 

Tendances (20)

Tutorial Git
Tutorial GitTutorial Git
Tutorial Git
 
Git
GitGit
Git
 
Retour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesRetour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, Kubernetes
 
JCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratiqueJCertif 2012 : Git par la pratique
JCertif 2012 : Git par la pratique
 
Partie1 TypeScript
Partie1 TypeScriptPartie1 TypeScript
Partie1 TypeScript
 
Git pour les (pas si) nuls
Git pour les (pas si) nulsGit pour les (pas si) nuls
Git pour les (pas si) nuls
 
Git ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versionGit ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de version
 
Git utilisation quotidienne
Git   utilisation quotidienneGit   utilisation quotidienne
Git utilisation quotidienne
 
Présentation1
Présentation1Présentation1
Présentation1
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
 
Présentation du versioning avec Git
Présentation du versioning avec GitPrésentation du versioning avec Git
Présentation du versioning avec Git
 
Découvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentraliséDécouvrir et utiliser Git : le logiciel de gestion de versions décentralisé
Découvrir et utiliser Git : le logiciel de gestion de versions décentralisé
 
Installation et configuration d'openbravo
Installation et configuration d'openbravoInstallation et configuration d'openbravo
Installation et configuration d'openbravo
 
Android NDK
Android   NDKAndroid   NDK
Android NDK
 
Les bases de git
Les bases de gitLes bases de git
Les bases de git
 
Versioning avec Git
Versioning avec GitVersioning avec Git
Versioning avec Git
 
Comprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractibleComprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractible
 
Migration d'une base de code subversion vers git
Migration d'une base de code subversion vers gitMigration d'une base de code subversion vers git
Migration d'une base de code subversion vers git
 
Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...Développement informatique : Gestion de projet, versioning, debugging, testin...
Développement informatique : Gestion de projet, versioning, debugging, testin...
 
Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013Tableau de bord Yammer sous SharePoint 2013
Tableau de bord Yammer sous SharePoint 2013
 

En vedette

Design System Ops
Design System OpsDesign System Ops
Design System OpsQvik
 
Building your first UX Lab : Presented at GDS
Building your first UX Lab : Presented at GDSBuilding your first UX Lab : Presented at GDS
Building your first UX Lab : Presented at GDSCraig Spencer
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Yves-Emmanuel Jutard
 
Mobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC NewsMobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC NewsJohn Cleveley
 
2015 nouveaux outilsdevweb
2015 nouveaux outilsdevweb2015 nouveaux outilsdevweb
2015 nouveaux outilsdevwebPhilippe Antoine
 
team++; making your team work better together
team++; making your team work better togetherteam++; making your team work better together
team++; making your team work better togetherNeil Crosby
 
15 Years of Apple's Homepage
15 Years of Apple's Homepage15 Years of Apple's Homepage
15 Years of Apple's HomepageCharlie Hoehn
 
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)Amelie Boucher
 
Palestra node.js
Palestra   node.js Palestra   node.js
Palestra node.js Suissa
 
Enib cours c.a.i. web - séance #6 : introduction à node js
Enib   cours c.a.i. web - séance #6 : introduction à node jsEnib   cours c.a.i. web - séance #6 : introduction à node js
Enib cours c.a.i. web - séance #6 : introduction à node jsHoracio Gonzalez
 

En vedette (10)

Design System Ops
Design System OpsDesign System Ops
Design System Ops
 
Building your first UX Lab : Presented at GDS
Building your first UX Lab : Presented at GDSBuilding your first UX Lab : Presented at GDS
Building your first UX Lab : Presented at GDS
 
Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014Apéro techno node.js + AngularJS @Omnilog 2014
Apéro techno node.js + AngularJS @Omnilog 2014
 
Mobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC NewsMobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC News
 
2015 nouveaux outilsdevweb
2015 nouveaux outilsdevweb2015 nouveaux outilsdevweb
2015 nouveaux outilsdevweb
 
team++; making your team work better together
team++; making your team work better togetherteam++; making your team work better together
team++; making your team work better together
 
15 Years of Apple's Homepage
15 Years of Apple's Homepage15 Years of Apple's Homepage
15 Years of Apple's Homepage
 
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
 
Palestra node.js
Palestra   node.js Palestra   node.js
Palestra node.js
 
Enib cours c.a.i. web - séance #6 : introduction à node js
Enib   cours c.a.i. web - séance #6 : introduction à node jsEnib   cours c.a.i. web - séance #6 : introduction à node js
Enib cours c.a.i. web - séance #6 : introduction à node js
 

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

Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...Microsoft
 
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPAGrunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPATouchify
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linuxKhalid ALLILI
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hoodsvuillet
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJSVISEO
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Xavier NOPRE
 
Présentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - ZenikaPrésentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - ZenikaZenika
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsHugo Hamon
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linuxKhalid ALLILI
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de JhipsterKokou Gaglo
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)DNG Consulting
 
Gitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement ContinueGitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement ContinueVincent Composieux
 
Tutorial android - créer des apps
Tutorial android - créer des appsTutorial android - créer des apps
Tutorial android - créer des appsNoé Breiss
 
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...XavierPestel
 
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsSpring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsJulien Wittouck
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 
Installer et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linuxInstaller et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linuxZakariyaa AIT ELMOUDEN
 

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

Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
Grunt / Bower / Yeoman ou comment automatiser le développement d’un projet we...
 
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPAGrunt, Bower, Yeoman ou comment automatiser un projet web SPA
Grunt, Bower, Yeoman ou comment automatiser un projet web SPA
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linux
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
GWT : under the hood
GWT : under the hoodGWT : under the hood
GWT : under the hood
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
 
Présentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - ZenikaPrésentation Gradle au LyonJUG par Grégory Boissinot - Zenika
Présentation Gradle au LyonJUG par Grégory Boissinot - Zenika
 
Intégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec JenkinsIntégration continue des projets PHP avec Jenkins
Intégration continue des projets PHP avec Jenkins
 
PostgreSQL sous linux
PostgreSQL sous linuxPostgreSQL sous linux
PostgreSQL sous linux
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de Jhipster
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
Gitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement ContinueGitlab CI : Integration et Déploiement Continue
Gitlab CI : Integration et Déploiement Continue
 
Tutorial android - créer des apps
Tutorial android - créer des appsTutorial android - créer des apps
Tutorial android - créer des apps
 
Tutorial android
Tutorial androidTutorial android
Tutorial android
 
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
 
Spring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'tsSpring Boot & Containers - Do's & Don'ts
Spring Boot & Containers - Do's & Don'ts
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 
Gradle
GradleGradle
Gradle
 
Installer et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linuxInstaller et configurer NAGIOS sous linux
Installer et configurer NAGIOS sous linux
 

Plus de Corinne Schillinger

Integration web : qualite & productivite FTW
Integration web  : qualite & productivite FTWIntegration web  : qualite & productivite FTW
Integration web : qualite & productivite FTWCorinne Schillinger
 
Et si j’écrivais un livre ? (Sud Web 2013)
Et si j’écrivais un livre ? (Sud Web 2013)Et si j’écrivais un livre ? (Sud Web 2013)
Et si j’écrivais un livre ? (Sud Web 2013)Corinne Schillinger
 
Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)Corinne Schillinger
 
Introduction à LESS (Sud Web 2011)
Introduction à LESS (Sud Web 2011)Introduction à LESS (Sud Web 2011)
Introduction à LESS (Sud Web 2011)Corinne Schillinger
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)Corinne Schillinger
 
Comment intégrer une newsletter (KiwiParty 2010)
Comment intégrer une newsletter (KiwiParty 2010)Comment intégrer une newsletter (KiwiParty 2010)
Comment intégrer une newsletter (KiwiParty 2010)Corinne Schillinger
 
Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)
Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)
Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)Corinne Schillinger
 

Plus de Corinne Schillinger (7)

Integration web : qualite & productivite FTW
Integration web  : qualite & productivite FTWIntegration web  : qualite & productivite FTW
Integration web : qualite & productivite FTW
 
Et si j’écrivais un livre ? (Sud Web 2013)
Et si j’écrivais un livre ? (Sud Web 2013)Et si j’écrivais un livre ? (Sud Web 2013)
Et si j’écrivais un livre ? (Sud Web 2013)
 
Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
Ajoutez du sens à vos pages avec les microdonnées (Sud Web 2012)
 
Introduction à LESS (Sud Web 2011)
Introduction à LESS (Sud Web 2011)Introduction à LESS (Sud Web 2011)
Introduction à LESS (Sud Web 2011)
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
 
Comment intégrer une newsletter (KiwiParty 2010)
Comment intégrer une newsletter (KiwiParty 2010)Comment intégrer une newsletter (KiwiParty 2010)
Comment intégrer une newsletter (KiwiParty 2010)
 
Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)
Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)
Comment convaincre un client de la qualité de votre prestation (Parsi Web 2010)
 

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

  • 1. Automatisez vos tâches répétitives avec Corinne Schillinger BLEND WEB MIX 2013
  • 3. Pré-requis v0.8.0 min grunt-cli $ npm install -g grunt-cli en mode admin
  • 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.
  • 11. La fonction globale module.exports = function(grunt) { // Code Grunt };
  • 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.
  • 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. 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. 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' } }
  • 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. 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. 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. 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.
  • 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. 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. 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. Merci ! des questions ? Corinne Schillinger @schillinger BLEND WEB MIX 2013