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 des devDependencies 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