{"id":20601177,"url":"https://github.com/cleverage/garden-starter-kit","last_synced_at":"2025-04-15T01:36:49.500Z","repository":{"id":49173838,"uuid":"53129427","full_name":"cleverage/garden-starter-kit","owner":"cleverage","description":"La base de projet utilisé pour le développement static front-end chez Clever Garden","archived":false,"fork":false,"pushed_at":"2021-06-25T04:20:04.000Z","size":955,"stargazers_count":20,"open_issues_count":39,"forks_count":15,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-28T13:37:25.890Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cleverage.png","metadata":{"files":{"readme":"readme.dist.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-04T10:59:42.000Z","updated_at":"2021-02-02T16:05:09.000Z","dependencies_parsed_at":"2022-07-30T16:18:52.666Z","dependency_job_id":null,"html_url":"https://github.com/cleverage/garden-starter-kit","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleverage%2Fgarden-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleverage%2Fgarden-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleverage%2Fgarden-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleverage%2Fgarden-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cleverage","download_url":"https://codeload.github.com/cleverage/garden-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650436,"owners_count":21139672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-16T09:08:54.454Z","updated_at":"2025-04-15T01:36:49.480Z","avatar_url":"https://github.com/cleverage.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"PROJECT_NAME\n===============================================================================\n\nCe dépôt contient les maquettes sous forme d’intégration statique ainsi que la documentation et les outils nécessaires à la conception frontend du projet.\n\nCe dépôt est basé sur le [Garden Starter Kit](https://github.com/cleverage/garden-starter-kit).\n\nChaque outil du GSK dispose d’une documentation dédiée sur la façon de\nl’utiliser dans notre contexte. Cette documentation est rédigée au [format\nMarkdown](https://daringfireball.net/projects/markdown/syntax) et est disponible dans le répertoire `.gsk/docs` de ce dépôt.\n\n\nPrérequis\n-------------------------------------------------------------------------------\n\n## Avec Docker (recommandé)\nCe projet nécécite que ces outils soient installé sur votre machine.\n\n* [Git](http://git-scm.com/)\n* [Docker](https://www.docker.com/products/docker) : Merci de suivre les instructions d’instalation sur le site officiel.\n\n[Pour plus d’info sur l’usage de docker](.gsk/docs/docker.md).\n\n## Sans Docker (non-recommandé)\nSans Docker ce projet nécessite que votre environnement dispose de tous les outils suivants installés au niveau global sur votre machine :\n\n* [Git](http://git-scm.com/)\n* [NodeJS](http://nodejs.org/)\n* [Ruby](https://www.ruby-lang.org/fr/)\n* [Rubygems](http://rubygems.org/)\n* [Bundler](http://bundler.io/)\n\n\u003e Pour **Mac** : _vous devez obligatoirement installer XCode et les outils en\n  ligne de commande qui l’accompagnent (ce qui installera automatiquement Ruby et Rubygems). Il est également recommandé d'installer et d'utiliser\n  [Homebrew](http://brew.sh/) pour installer tous les outils en ligne de\n  commande dont vous pourriez avoir besoin._\n\n\u003e Pour **Windows** : _un des modules installés par Bundle nécessite une\n  compilation en C. Pour cela, installez le Ruby Development Kit en suivant\n  [ces instructions](https://github.com/oneclick/rubyinstaller/wiki/Development-Kit)._\n\n\u003e Pour **Linux** : _Chaque distribution a ses propre prérequis. Par exemple,\n  Linux Mint 16 a besoin de `ruby1.9.1-beta`_\n\nAfin de pouvoir utiliser facilement les commandes fournies par npm (notamment _gulp_), installées\ndans votre répertoire projet (dans le dossier `node_modules`), plusieurs méthodes existent.\n\n### Solution 1 : ajout au PATH\n\nLa plus simple est d'ajouter le répertoire `./node_modules/.bin` a votre `PATH`, mais suivant votre environnement, vous aurez peut-être besoin de le faire pour chaque projet.\n\nPour Mac/Linux, rajouter la ligne suivante dans votre fichier `~/.profile`\n(Mac), `~/.bash_rc` (Linux) ou tout autre fichier de configuration\ncorrespondant à votre shell, pour que le changement soit effectif à chaque\nlancement de votre terminal.\n\n```sh\nexport PATH=\"./node_modules/.bin:$PATH\"\n```\n\nVous pourrez alors lancer directement depuis votre terminal les commandes :\n\n```\n$ gulp live\n```\n\n### Solution 2 : méthode dédiée\n\nUne autre solution valable d’un projet à l’autre est de définir une fonction dédiée dans votre _profile_ de terminal qui ira à chaque fois lancer les commandes inhérentes au projet en cours.\n\nPour Mac/Linux, rajouter la fonction suivante dans votre fichier `~/.profile`\n(Mac), `~/.bash_rc` (Linux) ou tout autre fichier de configuration\ncorrespondant à votre shell, pour que le changement soit effectif à chaque\nlancement de votre terminal.\n\n```\nfunction npm-do {\n\t(PATH=$(npm bin):$PATH; eval $@;)\n}\n```\n\nVous pourrez alors lancer les commandes voulues par le biais de cette méthode :\n\n```\n$ npm-do gulp live\n```\n\n\nInnitialisez votre environement\n-------------------------------------------------------------------------------\n\n### Clôner ce dépôt avec Git\n\nClôner ce dépôt avec Git :\n\n```bash\n$ cd ~\n$ git clone GIT_REPO_URL\n```\n\n### Initialisation de Docker\n\nSi vous utilisez Docker lancer il faut créer l’image docker locale :\n\n```bash\n$ docker build -t cleverage/garden-starter-kit .\n```\n\n\u003e **NOTE :** _À terme,\n  il est prévu que l’image soit disponible sur le Docker hub._\n\nVous pouvez ensuite travailler dans cette image :\n\n```bash\n$ docker run -it --name myProject -v \"$PWD\":/usr/src/app -p 8000:8000 -p 3001:3001 cleverage/garden-starter-kit bash\n```\n\n### Installation des dépendances du projet\nLors du démarrage de votre projet et à chaque fois que le dépôt est rapatrié en\nlocal, exécutez les commandes suivantes :\n\n```bash\n$ npm install\n```\n\n\u003e **NOTE :** _Commande à lancer dans l’image Docker si vous utilisez Docker._\n\n\nOrganisation des fichiers\n-------------------------------------------------------------------------------\n\nLe projet utilise la structure de fichiers suivante.\n\nLes sources sur lesquelles nous travaillons sont toutes dans le répertoire\n`src`. _Normalement, seuls les fichiers présents dans ce répertoire devraient\nêtre modifiés après l’initialisation du projet._\n\n* `/src`\n* `/src/css` : l’ensemble des fichiers qui produiront du CSS.\n* `/src/js` : l’ensemble des sources JavaScript du projet\n* `/src/assets` : l’ensemble des fichiers qui doivent être utilisés par le projet en l’état.\n* `/src/assets/img` : l’ensemble des images d’interface du projet\n* `/src/assets/sprites` : l’ensemble des images d’interface qui seront regroupées en sprites\n* `/src/assets/fonts` : l’ensemble des fontes utilisées par le projet\n* `/src/html` : l’ensemble des gabarits qui produiront du HTML\n* `/src/data` : les fichiers JSON de données à injecter dans les gabarits HTML ou autres\n* `/src/docs` : l’ensemble de la documentation statique du projet au format Markdown\n\nÀ chaque fois que le projet est « construit », le résultat est disponible dans\nles répertoires suivant :\n\n* `/build`\n* `/build/doc` : toute la documentation du projet au format HTML\n\n\nTâches\n-------------------------------------------------------------------------------\n\nLe projet hérite des tâches Gulp normalisées du _Garder Starter Kit_ dispose d'un certain nombre de tâches.\n\n**live** : Permet de démarrer un serveur statique pour les pages HTML et d’avoir un _watch_ sur les fichiers du projet en même temps.\n\n\u003e **ATTENTION :** _Même si tous les chemins sont résolus de manière relative, il\n  est vivement conseillé de préférer cette méthode à tout autre serveur local\n  que vous pourriez utiliser. De cette manière, vous verrez toujours votre site\n  « à la racine ». Votre site répondra sur l’URL : [http://localhost:8000](http://localhost:8000)_\n\n```bash\n$ gulp live\n\n# Pour ne pas être embêté par les tests,\n# vous pouvez lancer le live en mode relax\n# (Mais c’est mal et vous le savez)\n$ gulp live --relax\n\n# Pour des raisons de performance,\n# le watcher ne génère pas par défaut la documentation\n# Mais vous pouvez activer cette fonctionalité :\n$ gulp live --doc\n```\n\n**build** : Contruit la version statique du projet (compile les fichiers Sass, assemble les fichiers HTML, etc.)\n\n```bash\n$ gulp build\n\n# Pour créer un build optimisé pour la prod\n# (Fichiers minifiés, pas de doc, etc.)\n$ gulp build --optimize\n```\n\n**css** : construit les feuilles de styles\n\n```bash\n$ gulp css\n```\n\n**html** : construit les pages HTML statiques\n\n```bash\n$ gulp html\n```\n\n**js** : construit les fichiers JS\n\n```bash\n$ gulp js\n```\n\n**assets** : déplace et optimise les ressources statiques du projet\n\n```bash\n$ gulp assets\n```\n\n**doc** : génère la documentation du projet\n\n```bash\n$ gulp doc\n```\n\n**test** : exécute tous les tests du projet\n\n```bash\n$ gulp test\n```\n\n**sftp-deploy** : déploie le dossier build sur le serveur de preview. Sur le serveur distant, le nom du dossier créé contiendra le numéro de version renseigné dans le fichier `package.json`.\n\n```bash\n$ gulp sftp-deploy\n```\n\n\nOutils utilisés\n-------------------------------------------------------------------------------\nLes outils listés ici doivent êtres utilisés obligatoirement lorsqu’on démarre un nouveau projet d’intégration. Ils garantissent un _workflow_ de travail optimal.\n\n* [Gulp](http://gulpjs.com/)\n* [Linter](.gsk/docs/linter.md)\n\nLes outils listés ci-après sont à utiliser et à configurer pour votre projet.\nIls sont tous utilisables tels quels, mais le _starter kit_ est suffisamment flexible pour s’adapter à vos besoins. Le choix d'utilisation de ces outils se fait via le fichier `.gsk/config.json`, voir les instructions de configuration ci-après :\n\n### CSS\n* [Sass](.gsk/docs/css/sass.md) [Recommandé]\n* ~~[Sass/Compass](.gsk/docs/css/compass.md)~~\n* ~~[Stylus](.gsk/docs/css/stylus.md)~~\n* ~~[LESS](.gsk/docs/css/less.md)~~\n\n### HTML\n* [Twig](.gsk/docs/html/twig.md) [Recommandé]\n* ~~[Handlebars](.gsk/docs/html/handlebars.md)~~\n\n### JavaScript\n* [Webpack + NPM](.gsk/docs/js/webpack.md)\n\n### Documentation\n* [Documentation statique](docs/index.md)\n* [KSS](.gsk/docs/kss.md)\n\n### Autres outils\n* [Nproxy](.gsk/docs/nproxy.md) pour servir vos fichiers locaux à la place de fichiers distants (debug)\n* [Browsersync](.gsk/docs/browsersync.md) pour rendre le browser-testing plus facile\n* [Import](.gsk/docs/import.md) pour copier simplement des fichiers dans le build (exemple : assets de dépendances)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcleverage%2Fgarden-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcleverage%2Fgarden-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcleverage%2Fgarden-starter-kit/lists"}