Le cahier des charges de la version 2018 de mon Gulpflow Workflow (parce qu’on va p’tet pas utiliser Gulp mais plutôt Webpack).
Pré-requis
Concepts
- Abandon de Bower au profit de Yarn ou de NPM uniquement (« NPM uniquement » compromis, car on ne peut pas séparer les
dependencies
desdevDependencies
dans des dossiers séparés). - Le gulpfile.js devient juste un loader; le code est éclaté en divers fichiers, réunis dans un dossier
gulp
:
gulpfile.js gulp ├── config.js ├── paths.js └── tasks ├── base │ ├── yarn.js │ ├── clean.js │ ├── serve.js │ └── watch.js ├── build │ ├── css.js │ ├── fonts.js │ ├── html.js │ ├── images.js │ └── scripts.js └── default ├── fonts.js ├── images.js ├── nunjucks.js ├── sass.js └── scripts.js
- Utiliser un argument
--dev
pour pré-processer plus rapidement en dev
Tâches
- Permettre une utilisation et une surcharge facile des vendors (ou third-party plugins).
- Concaténer et minifier les styles
- Interpréter SASS
- Interpréter LESS (v2)
- Concaténer et minifier les scripts
- Interpréter ES6
- Compresser les images
- Créer des sprites SVG avec génération d’une planche de documentation
- Ajouter un hash aux libellés des fichiers de sortie (CSS notamment) pour pallier à des problèmes de caches
Arborescences
Arborescence de dev