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