Modification de l'arborescence

[hiwelo]

Je propose une modification de l'arborescence du projet Alstart pour plus de clarté et de lisibilité.

L'idée c'est :

• avoir tous les assets de production et de travail dans un même dossier, plus sémantique, directement à la racine.
• dans ce dossier assets/ se trouve les deux dossiers pour les fichiers :
  • le dossier des fichiers de travail (*.less & *.js) dans lesquels nous effectuons les modifications ainsi que les fichiers sources avant optimisation (images, fonts).
  • le dossier des fichiers de production (.min.css, .min.js, images & fonts optimisées) que nous appelons dans nos pages web mais que nous ne touchons pas.

Ainsi, si nous devons appeler une image dans notre projet :

• on l'ajoute dans assets/src/img/
• on fait tourner gulp images pour optimiser les images de ce dossier
• l'image ajoutée se retrouve optimisée dans le dossier assets/dist/img/ duquel nous pouvons l'appeler dans nos fichiers HTML ou CSS.

L'avantage de cette arborescence c'est qu'elle évite de sortir du dossier de travail ou de production dans nos liens symboliques. Dans nos fichiers LESS, nous ne trouvons jamais mention de src/ ou de dist/. Et dans nos fichiers HTML nous faisons toujours appel à ce qui se trouve dans assets/dist/.

Autre avantage, pour la livraison, il suffit de supprimer le dossier assets/src/ une fois un gulp effectué pour fournir au client les livrables de production présents dans le dossier assets/dist/

C'est la méthode que j'utilise déjà dans mon starter perso https://github.com/hiwelo/hwlo-starter et ça marche vraiment pas mal, c'est une arborescence claire et compréhensible : on ne met jamais les pieds dans dist/ pour quoi que ce soit :)

Ça vous tente ? :)

[raphaelgoetter]

Pourquoi pas, mais je crains que certains chemins deviennent soudain beaucoup plus complexes.

Imaginons que j'ai une image de background ou une fonte déclarées en CSS.

Pour l'instant j'écris ça :

@font-face { src(fonts/kiwi.woff2); }
background: url(img/kiwi.png);

Avec cette nouvelle arbo, je devrais écrire ça ?

@font-face { src(../../../assets/css/fonts/kiwi.woff2); }
background: url(../../../assets/css/img/kiwi.png);

Autre question : actuellement, le but est de livrer le dossier dist au client. Il y retrouve tout ce dont il a besoin.

Avec cette arbo si j'ai bien compris, assets n'étant pas dans dist, il faut lui livrer les deux dossiers, avec les soucis que cela peut engendrer pour le client. Le principal souci pour le client étant d'avoir son "site" scindé en deux.

[hiwelo]

Bah pour les appels de ressources, justement non :

@font-face {
  src: url('../fonts/fichier.woff2');
}
html {
  background: url('../img/kiwi.png');
}

C'est justement actuellement où c'est plus compliqué puisqu'il faut faire gaffe à l'arborescence. Là l'idée c'est qu'on ne sort jamais de plus d'un répertoire :)

Et du coup, pour le client, il faut juste supprimer assets/src :)

Mais c'est juste une idée hein ;) Dans tous les cas, on pourrait déjà déplacer la configuration du styledown dans src/ plutôt que dans dist/ :)

[raphaelgoetter]

"normalement", actuellement, il suffit de supprimer src et tout devrait fonctionner aussi puisque dist est censé être complètement généré.

Faudrait tester sur des cas concrets pour se faire une idée.