hierarchie

Organisation des dossiers

Voici à titre d'exemple, un site appelé 'Club' :

Chemins1

Aucune règle n'est imposée. Chaque développeur a son organisation ... ou pas !
Dès lors que vous travaillez à plusieurs ou même que vous créez plusieurs sites, le besoin d'uniformiser sa structure devient nécessaire : la même disposition des dossiers sera appliquée à tous les sites ... et par tous.
C'est pourquoi vous devez incorporer une convention (celle-ci ou la votre) très vite dans votre formation.

En effet, un site peut être composé de dizaines voire de centaines de fichiers !
D'où nécessité d'une bonne organisation.

  • Fichiers html.
  • Fichiers css associés à une page html.
  • Fichiers js associés à une page html.
  • Images associés à une page html.
  • Documents divers à télécharger (pour vos visiteurs) : Downloads.
  • Documents divers téléchargés (par vos visiteurs) : Uploads.
  • Documentation générale, pouvant contenir des sous-dossiers :
    • Ébauches, brouillons, croquis (scans ou photos).
    • Liste de 'todos' (à faire).
    • Images brutes, avant retouches.
    • Vidéos, liens divers sur le web.
    • etc. En règle générale, ces documents sont privés, ils ne seront pas publiés.
  • Librairies (Bibliothèques) globales :
  • Utilisation de préprocesseurs :
    • Permettent une écriture simplifiée du html, du css ou du javascript.
    • La compilation automatique (la transpilation) permet aussi de vérifier la syntaxe de votre code.
    • Autrement dit, les préprocesseurs vous permettent d'écrire du code :
      • Plus rapidement.
      • Plus 'propre' (bien indenté ou minifié) : Respect des bonnes pratiques.
      • Plus sûr : Les erreurs de syntaxe sont signalées.
    • Dans notre site d'exemple, les préprocesseurs sont activés par gulp.
      • Les fichiers-source sont dans des sous-dossiers de gulp.
      • A chaque modification des sources la transpilation s'effectue automatiquement.
    • Préprocesseur SLIM : transforme votre code 'slim' (source) en code 'html' (cible)
      • Les fichiers-source sont dans <site>\gulp\slim\<branche-html>
      • Les fichiers-cible seront créés dans <site>\<branche-html>
    • Préprocesseur SCSS : transforme votre code 'scss' (source) en code 'css' (cible)
      • Les fichiers-source sont dans <site>\gulp\scss\<branche-css>
      • Les fichiers-cible seront créés dans <site>\<branche-css>
    • Préprocesseur COFFEESCRIPT : transforme votre code 'coffee' (source) en code 'js' (cible)
      • Les fichiers-source sont dans <site>\gulp\coffee\<branche-js>
      • Les fichiers-cible seront créés dans <site>\<branche-js>

Cas des CMS et des frameworks php :

Les principaux CMS (Content Managment System) sont WordPress, Joomla, Drupal, ...

Les principaux frameworks sont Laravel, CakePhp, Symphony, Zend, CodeIgniter, ...

Ces CMS ou framework utilisent en outre des fichiers php, groupés par thèmes, plugins, fonctionnalités, etc.
Ils ont donc leur propre arborescence de fichiers.

Si vous êtes dans ce cas vous devrez impérativement respecter l'organisation des dossiers, imposée par le CMS ou le framework.
Toutefois, vous pouvez ajouter le robot gulp au sommet hiérarchique des fichiers html, css ou js concernés.

Vous souhaitez par exemple développer un thème WordPress, vous pourrez créer votre robot gulp en <nom du site>\wp-content\themes\<mon-theme>\gulp


Cas de sites statiques :

C'est notre cas actuel. Voici l'arborescence déployée de ce que devrait être votre organisation de dossiers et fichiers.

Chemins0


Exercice :

  • Création assistée d'un site en www\exe002\club, à l'aide du programme "robot Gulp", avec toutes les options :
    • Page d'accueil : toutes les cases cochées.
    • Page "Création d'un nouveau projet" : toutes les cases cochées.
    • Observer l'arborescence des dossiers et fichiers créés par le robot.
  • Détruire ce site (supprimer le dossier www\exe002\club)
    • Le but était simplement de vous familiariser avec cette organisation.
    • Tous les sites statiques que vous créerez auront la même.
0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *