portfolio_one page template

Portfolio One -Page -Vorlage - archiviert

Flache und reaktionsschnelle Website -Vorlage, entworfen und codiert von Maxim Orlov.

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

Produktmodelle erstellt mit http://magicmockups.com/

Inhalt

• Ordner- und Dateistruktur
• Anforderungen:
  • EditorConfig
• Wie man anfängt
• Site -Konfiguration
• Aufgaben
  • Aufräumarbeiten
  • Dev
  • Bauen
  • Wiederaufbau
  • Server
  • Sprite
• Live Reload
• Lizenz

Ordner- und Dateistruktur

 ./
├── .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

Anforderungen

• Node.js
• Bauen Sie SYTEM: Grunzen oder Schlucken
• Optional:
  • EditorConfig

EditorConfig

Dieses Projekt hat eine .DitorConfig -Datei am Root. Es beschreibt den Einstellstil, die nachverfolgenden Weißespaziale usw. Weitere Details finden Sie hier

Wie man anfängt

Wenn Sie Gulp noch nicht verwendet haben

Vor dem Start müssen Sie NPM sowie weltweit gulpiert haben.

Ein paar einfache Schritte zum Starten:

• Installieren Sie Abhängigkeiten von package.json , indem Sie: npm install .
• Führen Sie Aufgaben aus der folgenden Liste aus und starten Sie die Entwicklung!
• Bearbeiten Sie die allgemeinen Einstellungen im Abschnitt dev/data/config.json Siehe Site -Konfiguration

Site -Konfiguration

Diese Kesselplatte verwendet Mopsvorlagen mit externen Datenkonfigurationen. Haupteinstellungen finden Sie in dev/data/config.json -Datei. Und sie sind für die Verwendung in Vorlagen mit config.key-name verfügbar

Aufgaben

Hier kommen Gruppen von Gulp -Aufgaben mit einigen Erklärungen

Aufräumarbeiten

Entfernen Sie Platzhalter aus Arbeitsverzeichnissen. Schluck: gulp cleanup

• Entfernen Sie Gitkeepateien

Dev

Dev -Aufgabe mit statischer Server. Gulp: gulp dev

• Bündel Javascripts
• Kompilieren Sie Sass Stylesheets
• Fügen Sie Herstellerpräfixe in CSS hinzu
• Kombinieren Sie Medienabfragen in CSS -Dateien
• Mopsvorlagen kompilieren
• Synchronisierungshelfer und andere Vermögenswerte
• Schriftarten synchronisieren
• Synchronisierungsbilder
• Führen Sie Browsersync Static Server mit Live -Reload mit verwenden
• Achten Sie auf Änderungen und führen Sie Dev Task aus

Bauen

Aufgabe erstellen. Schluck: gulp build

• Bilder minifieren
• JavaScript -Dateien minifieren
• Stylesheets Minify
• HTML minify
• Führen Sie den statischen Server aus BrowserSync aus

Wiederaufbau

Wiederherstellen und erstellen Sie das Projekt, indem Sie alle Aufgaben ausführen. Schluck: gulp rebuild

• Bündel Javascripts
• Kompilieren Sie Sass Stylesheets
• Fügen Sie Herstellerpräfixe in CSS hinzu
• Kombinieren Sie Medienabfragen in CSS -Dateien
• Mopsvorlagen kompilieren
• Synchronisierungshelfer und andere Vermögenswerte
• Schriftarten synchronisieren
• Synchronisierungsbilder
• Bilder minifieren
• JavaScript -Dateien minifieren
• Stylesheets Minify
• HTML minify

Server

Führen Sie den Server aus, ohne nach Änderungen zu achten. Gulp: gulp server

• Führen Sie den statischen Server aus BrowserSync aus

Live Reload

Dieses Projekt verwendet BrowserSync als statischer Server mit aktivierter und konfigurierter Live -Reload -Option.

Lizenz

MIT