{"id":28245276,"url":"https://github.com/mperonnet/starter-front-end","last_synced_at":"2026-05-08T19:32:34.866Z","repository":{"id":100072429,"uuid":"111460998","full_name":"mperonnet/starter-front-end","owner":"mperonnet","description":"Starter Pack Front-end application GULP/SASS/TWIG/BABELIFY","archived":false,"fork":false,"pushed_at":"2018-05-07T10:10:32.000Z","size":596,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-05T15:36:31.070Z","etag":null,"topics":["babelify","frontend","gulp","integrated-development-environment","integration","sass","starter-kit","starter-template","twig"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mperonnet.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-20T20:45:50.000Z","updated_at":"2021-01-20T19:55:31.000Z","dependencies_parsed_at":"2023-05-12T03:00:44.743Z","dependency_job_id":null,"html_url":"https://github.com/mperonnet/starter-front-end","commit_stats":null,"previous_names":["mperonnet/starter-front-end"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mperonnet/starter-front-end","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mperonnet%2Fstarter-front-end","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mperonnet%2Fstarter-front-end/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mperonnet%2Fstarter-front-end/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mperonnet%2Fstarter-front-end/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mperonnet","download_url":"https://codeload.github.com/mperonnet/starter-front-end/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mperonnet%2Fstarter-front-end/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32794620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babelify","frontend","gulp","integrated-development-environment","integration","sass","starter-kit","starter-template","twig"],"created_at":"2025-05-19T09:12:19.920Z","updated_at":"2026-05-08T19:32:34.859Z","avatar_url":"https://github.com/mperonnet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StarterFrontEnd GULP/SASS/TWIG/BABELIFY\nVoici les étapes à suivre pour procéder a l'installation et le développement du projet.\n## Installation\nVoici les différents logiciels à installer pour faire fonctionner l'application.\n  - https://git-scm.com/downloads\n  - https://nodejs.org/en/download/  \n\n\u003eNode va nous permettre d'utiliser NPM (le Node Package Manager) qui nous sert a installer de nouveaux modules développés par la communauté notamment Gulp et bien d'autres encore.\n\n\u003eGit, c'est un gestionnaire de versions décentralisé. Cela permet à chaque développeur de posséder sa propre copie du projet, chez lui, localement sur son pc. Il permet également de pouvoir facilement partager son code avec les autres contributeurs du projet grace a un serveur de dépôt git. En l'occurence nous utiliserons Framagit.\n\n### Installer Gulp\n\nDès que Node.js est installé, ouvrez un terminal de commande n'importe où, et tapez :\n\n```sh\n$ npm install gulp -g\n```\n\n\u003e Cette instruction aura pour effet d'installer Gulp de manière globale sur votre ordinateur, et une fois pour toutes, cela ne se fait qu'une seule fois.\n\n**Si vous êtes sur Mac, vous aurez sans doute besoin de faire précéder cette syntaxe d'un sudo afin de disposer des droits suffisants, ce qui donnera:  `sudo npm install gulp -g`**\n\n### Configuration de Git\nUne des premières choses a faire, c'est de paramétrer Git avec votre nom et votre adresse e-mail : \n```sh\n$ git config --global user.name \"Prénom Nom\"\n$ git config --global user.email \"exemple@exemple.fr\"\n```\n\n### Récupération du projet\n\nAfin d'obtenir une copie d'un dépôt Git existant, il suffit de taper dans un terminal la commande `git clone` suivi du lien correspondant au projet git.\n```sh\n$ cd monDossier\n$ git clone https://github.com/Matteo-Peronnet/starter-front-end.git\n```\n\u003e Attention, il faut se déplacer avec le terminal avec la commande `cd` afin de se rendre dans dossier que vous connaissez\n\n### Installation des modules NPM\n\nMaintenant que vous avez récupérer le projet, déplacez-vous a la racine du projet a l'aide de la commande `cd` , vous devriez trouver une arborescence ressemblant à celle ci.\n```txt\n..\n├── gulpfile.js\n├── package.json\n├── readme.md\n├── src\n```\n\u003e Pour afficher l'arborescence, il suffit de taper la commande `ls` sur Mac et `dir` sur Windows\n\nIl faut maintenant installer les dépendances du projet pour cela exécutez cette commande :\n```sh\n$ npm install\n```\n\n**Vous avez maintenant terminé l'étape d'installation du projet.**\n\n## Développement\n\n### Gulp\n\nGulp est un **\"Automatiseur de tâches\"**, c'est à dire qu'il est capable de lancer des bouts de scripts qui vont permettre d'automatiser des fonctionalitées à notre place.\n* Minification du CSS\n* Autoprefixer CSS\n* Uglification du JS\n* Minification des Images\n* Compilation SASS\n* Serveur de développement\n* LiveReload (Rechargement à chaud)\n* Mise en Production\n* Moteur de Template TWIG\n\nToutes ces fonctionnalités sont configuré sur le projet afin d'aider au développement.\n\n### Utilisation\n\nPour lancer le serveur Web, il suffit de se rendre dans le dossier du projet toujours a l'aide de la commande `cd` puis de taper la commande :\n```sh\n$ gulp serve\n```\nLe terminal reste figé et vous donnes l'adresse du serveur local : `http://localhost:3000`\nVous pouvez accéder au site depuis cette url.\n\n## Intégration\n\n### Architecture\nPour la partie Intégration, comme je l'ai dis précédemment nous utilisons **SASS**, c'est un préprocesseur CSS qui permet de générer dynamiquement des fichiers CSS. L’objectif est d’améliorer l’écriture de ces fichiers, en apportant plus de flexibilité au développeur web. [Voir toutes les fonctionnalités de SASS]\n\nLe développement du CSS s’effectue depuis les différents fichiers comportant l'extension **.scss** que vous trouverez dans le dossier SCSS. Voici l'arborescence générale. \n```tree\n    └── scss \n        ├── components // Ce Dossier contient la mise en forme des composants du site\n        │   ├── _buttons.scss\n        │   ├── _forms.scss\n        ├── layout // Ce Dossier contient la Mise en page générale\n        │   ├── _footer.scss\n        │   ├── _general.scss\n        │   ├── _header.scss\n        │   ├── _menu.scss\n        │   └── pages // Ce Dossier conteint la Mise en page des Pages du site\n        ├── style.scss // Ce Fichier qui importe tous les autres fichiers\n        └── utilities // Ce Dossier contient les style utilitaires\n            ├── _classes.scss\n            ├── _function.scss\n            ├── _grid.scss\n            ├── _media-query.scss\n            ├── _mixins.scss\n            ├── _reset.scss\n            └── _variables.scss\n```\n\u003e Comme vous pouvez le voir **un seul fichier** ne comporte de **\"_\"** devant son nom, il s'agit du fichier **style.scss**. En effet, tous les fichiers ne possédant pas cet underscore, vont être généré en sortie par SASS. Nous ne voulons **qu'un seul fichier en sortie**, c'est pourquoi il est le seul.\n\nLe fichier style.scss importe tous les autres fichiers, donc à chaque création de nouveau fichier, il est **NÉCESSAIRE** de l'importer dans ce fichier afin qu'il soit généré dans le `\"style.css\"` !\n\n### Création\nPour chacune des pages, il faut créer son fichier SASS correspondant, dans le dossier pages du dossier Layout.\nExemple : \n*   `\"_contact.scss\"`\n*   `\"_equipe.scss\"`\n\n\u003e **ATTENTION ! Ne pas oublier le \"_\" dans devant son nom et de l'importer dans le fichier style.scss**\n\n\n## Moteur de Template TWIG\n\n### Introduction\nNous allons utiliser un moteur de template PHP en l’occurence, j'ai choisi TWIG. Il va nous aider dans la lisibilité et la logique du projet en général, de son code en particulier. \n\n\u003e Avant, on écrivait du `HTML` dans nos pages `.html`, jusqu'à la tout va bien. Le principal soucis, était que lorsque nous avions des éléments communs a toutes nos pages il fallait le répéter à chaques fois, et pour chaques modifications il fallait également le modifier sur toutes ces pages.\n`**TWIG EST LA SOLUTION**`\n\n### Mise en place\nNous allons pouvoir séparer nos codes `HTML` dans des fichiers `.twig`. Certains sont déjà intégré au projet comme vous pouvez le voir dans l'aborescence suivante.\n```\n└── src\n    ├── build\n    ├── css\n    ├── fonts\n    ├── img\n    ├── js\n    └── twig // Ce dossier contient toutes nos pages html \n        ├── index.twig // Page D'acceuil\n        └── template\n            └── layout.twig // Conteneur Général\n            └── header.twig // Template Header\n            └── footer.twig // Template Footer\n            └── menu.twig // Template Menu\n```\n\n\u003e Les fichiers Twig comporte l'extension `.twig` ils sont situés dans le dossier `src/twig`\n\nComme vous pouvez le voir nous avons un premier fichier nommé `index.twig`, c'est nôtre page d'acceuil. \n\nÉxaminons le code de ce fichier : \n```twig\n# Fichier : index.twig\n{% extends \"template/layout.twig\" %}\n \n{% block page %}\n    \u003cp\u003eJe suis le Texte de la Page\u003c/p\u003e\n{% endblock %}\n```\n\n\u003e Ce fichier étend une page via la commande \"extends\" et lui injecte des données via la commande \"block\".\n\nVoici à quoi correspond le fichier auquel nous étendons : \n\n```twig\n# Fichier : layout.twig\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"/\u003e\n    \u003clink href=\"css/style.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n    \u003ctitle\u003eTitre de la page\u003c/title\u003e\n \n\u003c/head\u003e\n\u003cbody\u003e\n    {% block page %}{% endblock %}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nL'ensemble des données situé dans le bloc page du fichier `index.twig` ont été injecté dans le bloc page du fichier `template.twig`.\n\n\u003e À chaques nouveau fichier nous allons rajouter cette ligne au début, cela va nous éviter de déclarer tout le `!DOCTYPE` l'entête `HEAD` à toutes nos pages etc .. \n\nDans le fichier `template.twig` on va même pouvoir y inclure le `header` et le `footer` ou même le `menu`, on va y mettre tous les éléments communs à chaques page. Voilà une des grandes utilitées que nous offres `TWIG`.\n\n### Rappels commandes TWIG\n\n`{% extends \"filename.twig\" %}` : **Permet de pouvoir remplacer le contenu d'un ou des blocs du fichier étendu**\n\n`{% include \"filename.twig\" %}` : **Permet d'inclure le contenu du fichier**\n\n### Coloration syntaxique\n\n#### SublimeText\n\n1. Ouvrir SublimeText\n2. Menu Preferences\n3. Package Control\n4. Tapez : Install Package\n5. Tapez : PHP-Twig\n6. Redémarrer SublimeText\n\n#### Bracket\n\n1. Téléchargez : https://github.com/Athorcis/brackets-twig/archive/master.zip\n2. Ouvrez Bracket\n3. Menu Help\n4. Show Extension Folder\n5. Copier le dossier télécharger dans le dossier ouvert par Bracket\n6. Redémarrer Bracket\n\n## Babelify\n\nL’idée de Browserify est de permettre aux développeurs front d’organiser leur code comme il le ferait pour développer leur code Back-end via l’utilisation de la gestion de module Node.js.\nOn aura donc un fichier JavaScript principal `src/js/app.js` dans lequel on importera les modules dont il dépend qui peuvent eux même dépendre d’autres modules etc.\nBrowserify interprétera ces chargements/imports de modules pour construire le fichier final le tout en utilisant les nouveaux standards JavaScript (`ES2015/ES2015`).\n\n\n### Exemple\n\nLorsque vous avez besoin d'un plugin externe à l'application, il est parfois éprouvant de devoir le l'installer, vérifier les versions, les compatibilitées etc ...\n\nGrâce au système de Module, par le simple ajout du plugin dans les dépendances du projet via la commande `npm install NomDuPlugin`, vous pouvez directement l'importer dans le projet.\n\nDans le StarterPack, j'ai fais un éxemple en utilisant `Jquery`.\n\n```sh\n$ npm install jquery\n```\n\u003e J'ai au préalable éffectuer cette commande qui a permi d'installer le plugin `Jquery` dans le dossier `node_modules`. \n\n```javascript\n# Fichier : src/js/app.js\nvar $ = require('jquery');\n```\n\u003e Grâce à l'ajout de cette ligne dans le fichier `src/js/app.js`, `Jquery` va être automatiquement charger dans le fichier. Nous pouvons maintenant installer n'importe qu'elle dépendance dans le projet, ainsi l'intégrer facilement avec la commande `require(\"NomDuPlugin\")` à la suite du fichier.\n\n\n[Voir toutes les fonctionnalités de SASS]: \u003chttps://www.alsacreations.com/article/lire/1717-les-preprocesseurs-css-c-est-sensass.html\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmperonnet%2Fstarter-front-end","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmperonnet%2Fstarter-front-end","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmperonnet%2Fstarter-front-end/lists"}