https://github.com/mistergraphx/fragments_builder
Gulp Building and prototyping tool [ Moved to GiltLab https://gitlab.com/mister-graphx/fragments/Builder ]
https://github.com/mistergraphx/fragments_builder
gulp libsass prototype workflow
Last synced: 3 months ago
JSON representation
Gulp Building and prototyping tool [ Moved to GiltLab https://gitlab.com/mister-graphx/fragments/Builder ]
- Host: GitHub
- URL: https://github.com/mistergraphx/fragments_builder
- Owner: mistergraphx
- Archived: true
- Created: 2016-02-14T08:31:01.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-05-21T08:46:01.000Z (almost 6 years ago)
- Last Synced: 2024-09-27T00:42:21.903Z (7 months ago)
- Topics: gulp, libsass, prototype, workflow
- Language: JavaScript
- Homepage:
- Size: 372 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Ce projet à été déplacé https://gitlab.com/mister-graphx/fragments/Builder
# Fragments Builder
Outil de prototypage , pre-processing, build system avec Node.js et gulp
## Fonctionalitées
### Pré/Post processeur css
(libsass, Autoprefixer)
### Jekill like pages
Template engine : Nunjuks templates
### Bundler
Creation de bundles html/js/css minifiés et optimisés suivant l'environnement
### Svg Utils
Création de sprites svg
Extraction de fichiers svg depuis une font svg (utilitaire de convertion pour passer progressivement aux sprites svg);
## Structure
* _EXTENSIONS/ : dossier du framework personnel (des modules, outils, fonctions utilisables dans plusieurs projets différents).
* _FRAMEWORKS/ : dossiers des frameworks vendeurs, libs scss, maintenus ailleurs (bootstrap, bourbon, susy ...), et que vous partagez dans plusieurs projets.
* _JS_LIBS/ : idem mais pour les libs js
* _MATERIALS/ : resources svg, icons, templates
* _KITCHEN/ : dossier de travail des projets
* gulp-tasks/ : dossier des taches gulp.
* gulpfile.js : le gestionnaire de taches
## Projet
Le projet est le seul argument passé au taches, c'est ce qui défini le chemin ou d'ou sera chargé le fichier app.js permettant de modifier les paramètres par défaut (cf. _config-default.js).
Créer un dossier et un fichier app.js.
```shell
# Nouveau projet
cp -r _KITCHEN/_app-boilerplates/starter _KITCHEN/project_name
```
## Utilisation
Changer l'environnement pour les bundles générés
```
export NODE_ENV=[production,development]
```
### Tache par defaut
`gulp --project=PROJECT_NAME`
[Styles] lib-sass, postCss auto-prefixer, bundle assets
* `gulp static-site --project=PROJECT_NAME` - Live reload, nunjuks, libsass
* `gulp config --project=PROJECT_NAME` - Retourne la config actuelle du projet
* `gulp font-blast --project=PROJECT_NAME` - Extrait
### Installation
**Pré-requis : Node (> v6)**
```shell
# in your working directory,localhost folder create a folder for the Builder
# ex: _FACTORY
cd ~/Sites/_FACTORY
# Get the folder structure and tasks
git clone https://github.com/mistergraphx/Fragments_builder.git
# Install required node modules
npm install
```
## Projets
Les projets sont stockés dans _KITCHEN/
### Structure du projet
* _BUILD/
* _src/
* assets/
* _scss/
* css/
* fonts/
* images/
* js/
* datas/ : optionnel *Dossier des fichiers `json` optionnel de datas pour les pages*
* pages/ : optionnel Fichers markdown de contenu jekill like pages
* templates/ optionnel : *Dossier des templates*
* _layouts/
* _partials/
* index.njk
* app.js
## Testing, Linting :
```
# Additionellement installer lighthouse
npm install -g lighthouse
cd _KITCHEN/mon_projet/
lighthouse http://mon_projet.local [--view: ouvre directement dans le navigateur le rapport .]
```
## CHANGELOG
v2.0.1
- maj des dependances
- [test] ajout de fontblast et d'une tache qui extrait les svg d'une font svg, afin de les réutiliser ensuite avec la tache sprite.
Pour les projets basé sur fragments on récupère en plus la glyph depuis les settings scss $icon-set, afin de pouvoir renommer correctement les fichiers svg générés.
v2.0.0
- remplacement de swig par Nunjuks
- Passage a postCss pour Autoprefixer et les post traitement css après libSass
- refonte de la configuration des projets
- les noms des dossiers de travail, ainsi que les chemins passe en Globales