Skip to content

Home

Jump to bottom
Jean-Bernard PHAM edited this page Mar 17, 2022 · 21 revisions

Documentation du Starter Front-End

Présentation

Le Starter Front-End est un outil qui permet rapidement d'installer un process de développement front-end sur n'importe quel type de projet ou de commencer un projet d'intégration sous PHP.

Le starter a pour socle le framework Bootstrap.

Prérequis

Il est recommandé d'utiliser pour installer et gérer les packages pour macOS. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install node

npm install gulp -g

brew install yarn

Technologies et frameworks utilisés :

Arborescence

dist/
├── css/
├── js/
├── vendor/
├── ...
docs/
src/
├── fonts/
├── gulp/
├── img/
├── sass/
│   ├── ...
│   ├── main.scss
└── js/
    ├── front.js
    ├── main.js
    gulpfile.js
    package-lock.json
    package.json
    yarn.lock
README.md
.gitignore
  • dist: dossier regroupant le CSS et JS (compilé et minifié) et les vendors.
  • docs: dossier de documentation sur les principaux composants du starter (Bouton, input,...)
  • src: dossier regroupant l'ensemble des fonctionnalités pour le développement front-end (fonts, js, sass, gulp-webpack, gulp, etc)

Installation

Le starter facilite le processus d'installation du développement Front-End afin qu'il s'adapte à n'importe quel type de projet.

Par défaut, le dossier dist est ignoré du git, mais ne pas le faire pour le projet.

Les instructions suivantes sont des règles générales qui peuvent être adaptées au projet convenu.

1. README (Front-End)

Le README du développement front-end regroupe des informations générales pour gérer et installer le process d'intégration et des packages.

Instructions sur le README pour un projet

  1. Copier le README du développement front-end à la place qui convient pour le projet.
  2. Ajouter au README du projet (Lien du doc du README du projet ici) :
    • Dans la section Installation, rajouter les instructions de la section Start the project (Front-End) du README du front-end.
    • Dans la section Documentation, rajouter la phrase :

Pour des informations complémentaires au développement front-end voir le README du dossier src.

2. Gitignore

Ajouter dans le gitignore du projet le gitignore du développement front-end.

3. Le dossier src

Instructions sur le dossier src

  1. Copier le dossier src à la place qui convient pour le projet.
  2. Adapter le process de développement (Pour plus d'informations sur gulp voir la page [Informations sur les tâches gulp] (https://github.com/kernix/front-end-starter/wiki/Informations-sur-les-t%C3%A2ches-gulp))
  3. Lancer npm start ou npm run start:dev pour voir si l'installation fonctionne.

4. Projet avec un middle et un front

Si le projet comporte développement front et middle, il faut :

  1. Créer les dossiers common , front et middle pour le dossier src/sass/ et src/js (le dossier common n'est pas nécéssaire pour le dossier src/js/)

Créer ses dossier permettent de séparer le processus de développement pour le middle et le front mais aussi de regrouper ce qui est commun aux deux parties dans le dossier common.

  1. Renommer et dupliquer les fichiers sass et js

Il faudra renommer theme.scss en front.scss et dupliquer les fichiers qui conviennent pour le dossier middle dont le fichier principale sera middle.scss. Idem pour le js.

  1. Modifier le gulpfile.js

Dupliquer et modifier les tâches sass et js du src/gulpfile.js. Modifier aussi la tâche watch.

Clone this wiki locally