Formation Webpack, Grunt, Gulp et Bower : Créer un environnement de développement

Présentation

Historique des versions
Les avantages de Webpack
Gulp vs Grunt vs Webpack
La documentation
Rappel node et npm

Atelier : Installer et créer un projet avec Webpack

Les bases

Configuration de l'environnement: webpack.config
Gestion des points d'entrées et des sorties
Utiliser les loaders et les plugins
Démarrer une application à l'aide des scripts npm
Utiliser les syntaxes ES6: babel loader

Atelier : Gérer un projet avec typescript 

Environnement et optimisation

Mode dev et mode prod
Créer un serveur local avec webpack-dev-server
Les sources map
Mise à jour automatique: watch mode
Minification des sources
Utiliser le lazy loading

Atelier : Configurer un projet pour l'environnement de développement et de production

Présentation Grunt / Gulp / Bower

Gulp

Undertaker, le système d'enregistrement des tâches automatisées
Création de tâches
Vyniles, les objets de fichiers virtuels
Globbing : localiser les fichiers à l'aide de globs
Modules de Gulp : publication de correction avec Semver

Atelier : installer, créer un projet et configurer l'environnement de développement

Grunt

gruntfile.js(ou Gruntfile.coffee) et package.json
Configurer et créer les tâches automatisées
Charger des tâches externes
Alertes et erreurs

Atelier : installer, créer un projet et configurer l'environnement de développement

Bower ou Yarn

Comparaison Bower - npm
installer des packages
créer son propre package
utiliser les variables d'environnement
Hooks

Atelier : installer, créer un projet et tester