frontend starter

Modèle de projet

Parce que le développement Web n'a pas besoin d'être pénible.

Le modèle de projet est le moyen de construire rapidement des sites statiques. Avec une commande, créez une page statique à l'aide de WebPack, Gulp, Growbars.js et SCSS.

[Es6]

Caractéristiques

• Installez le projet dans seulement trois commandes (voir "Développement" ci-dessous).
• Utilisez des guidon.js pour garder notre HTML organisé en modèles et partiels.
• Utilisez SCSS pour garder notre CSS organisé dans des composants logiques.
• Utilisez BrowSersync pour lancer automatiquement une version de développement de notre site Web, rechargez la page chaque fois que nous modifions le HTML et injectez des modifications à CSS, JavaScript et des images avec la nécessité de recharger.
• Utilisez le minificateur HTML et optimisez respectivement nos HTML, CSS, JavaScript et nos images.

Tout avec une commande du terminal:

yarn start

Installation

npm install -g gulp  # May require `sudo` 

Développement

yarn install            # One time
gulp serve

Rappels

Si vous souhaitez utiliser ce dépôt pour votre prochain projet, assurez-vous de faire les modifications suivantes:

1. EDIT data.yml , remplissant les métadonnées HTML associées à votre site.
2. Edit package.json Fournissant un name , version , description , license et repository.url .
3. Retirez le dossier .git , afin de commencer une nouvelle histoire de validation.
4. Modifiez README.md à votre préférence.

Commandes de gorgée

Un aperçu des commandes Gulp disponibles:

gulp build

Construit le site dans le répertoire dist . Cela comprend:

• SCSS, sourcemaps et autopréfixage
• Js uglification
• Guidon à HTML

gulp build:optimized

Ceci est utilisé pour distribuer une version optimisée du site (pour le déploiement). Il comprend tout de gulp build ainsi que:

• Minification SCSS
• CSS / JS en ligne

gulp watch

Montre les modifications des fichiers locaux et reconstruit les parties du site si nécessaire, dans le répertoire dist .

gulp serve

Exécute gulp watch en arrière-plan et sert le répertoire dist à localhost:3000 avec rechargement automatique à l'aide de Browsersync.

Structure

├── webpack.config.dev.js   # Controls javascript and css bundling
├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── data.yml                # Metadata associated with the site.
├── dist/                   # Gulp builds the static site into this directory
├── package.json            # Dependencies
└── src/                    # All source code
    ├── assets/ 
        ├── css/            # Stylesheets
        ├── font/           # Font files
        ├── img/            # Images and SVGs
        ├── js/             # Javascript libraries and scripts
    ├── views/     
        ├── partials/       # Handlebars HTML partials that are included / extended
        └── templates/      # Handlebars HTML files, one per page on the site.