portfolio_one page template

Modèle de portfolio une page - archivée

Modèle de site Web plat et réactif, conçu et codé par Maxim Orlov.

Demo: http://website-emplates.github.io/portfolio_one-page-template

Product Mockup créé avec http://magicmockups.com/

Contenu

• Structure de dossiers et de fichiers
• Exigences:
  • EditorConfig
• Comment commencer
• Configuration du site
• Tâches
  • Nettoyage
  • Dev
  • Construire
  • Reconstruire
  • Serveur
  • Lutin
• Rechargement en direct
• Licence

Structure de dossiers et de fichiers

 ./
├── .editorconfig
├── gulpfile.js
├── package.json
├── README.md
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   └── aliases.js
│   |
|   └── task.js
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   └── pages/                             * main pages templates
|   │
│   ├── js/                                    * source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * body scripts
|   │
|   ├── sass/                                  * sass preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.sass
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.sass
|   │   ├── noscript.sass
|   │   └── screen.sass
|   │
│   ├── helpers/                               * helper files
|   |   ├── favicon.ico
|   |   └── .htaccess
|   │
│   ├── fonts/                                 * font sources
|   │
│   └── data/                                  * configs and data for templates
│
└── build/                                     * built source
    ├── index.html
    ├── page.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

Exigences

• Node.js
• Construire un sytem: grognement ou gorgée
• Éventuellement:
  • EditorConfig

EditorConfig

Ce projet a un fichier .EditorConfig sur la racine. Il décrit le style de retrait, les espaces blancs, etc. Voir plus de détails ici

Comment commencer

Si vous n'avez jamais utilisé Gulp auparavant, assurez-vous de consulter le guide de démarrage, consultez également ces recettes

Avant de commencer, vous devez avoir installé le NPM , ainsi que Gulp Globalement.

Quelques étapes simples pour commencer:

• Installez les dépendances à partir de package.json en fonctionnant: npm install .
• Exécutez des tâches à partir de la liste ci-dessous et démarrez le développement!
• Modifier les paramètres généraux dans dev/data/config.json Voir la section Configuration du site

Configuration du site

Cetblage utilise des modèles de carlin avec des configurations de données externes. Les paramètres principaux peuvent être trouvés dans le fichier dev/data/config.json . Et ils sont disponibles pour l'utilisation dans des modèles avec config.key-name

Tâches

Voici des groupes de tâches de perfectionnement avec quelques explications

Nettoyage

Supprimer les espaces réservés des répertoires de travail. Gulp: gulp cleanup

• Supprimer les fichiers gitkeets

Dev

Tâche de développement avec serveur statique. Gulp: gulp dev

• Regrouper les javascript
• Compiler les feuilles de styles sass
• Ajouter les préfixes des fournisseurs dans CSS
• Combiner les requêtes multimédias dans les fichiers CSS
• Compiler les modèles de carlin
• Synchroniser les aides et autres actifs
• Synchronisation des polices
• Synchronisation des images
• Exécutez le serveur statique de BrowSersync avec un rechargement en direct en utilisant
• Surveillez les modifications et exécutez la tâche Dev

Construire

Construire la tâche. Gulp: gulp build

• Images miniflées
• Fichiers JavaScript Minif
• Minify Styleshets
• Html mini-
• Exécuter BrowSersync Static Server

Reconstruire

Régénérer et construire un projet en exécutant toutes les tâches. Gulp: gulp rebuild

• Regrouper les javascript
• Compiler les feuilles de styles sass
• Ajouter les préfixes des fournisseurs dans CSS
• Combiner les requêtes multimédias dans les fichiers CSS
• Compiler les modèles de carlin
• Synchroniser les aides et autres actifs
• Synchronisation des polices
• Synchronisation des images
• Images miniflées
• Fichiers JavaScript Minif
• Minify Styleshets
• Html mini-

Serveur

Exécutez le serveur sans surveiller les modifications. Gulp: gulp server

• Exécuter BrowSersync Static Server

Rechargement en direct

Ce projet utilise BrowSersyNC comme serveur statique avec une option de recharge en direct activée et configurée.

Licence

Mit