simple gallery_responsive template

Einfache Galerie-Reaktionsvorlage

Responsive Gallery Einseitige Vorlagenvorlage, entworfen und codiert von Maxim Orlov.

Demo: http://website-templates.github.io/simple-gallery_responsive-template

Produktmodelle erstellt mit http://magicmockups.com/

Inhalt

• Ordnerstruktur
• Anforderungen
  • EditorConfig
• Site -Konfiguration
• Aufgaben
  • Start
  • Dev
  • Bauen
  • Wiederaufbau
  • Server
• Live Reload
• Lizenz

Ordner- und Dateistruktur

 ./
├── .editorconfig
├── README.md
├── automation.sh
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   ├── settings.js
│   |   └── aliases.js
│   |
|   └── task.js
│
├── gulpfile.js
├── package.json
|
├── 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/                                    * compiled and source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * vendor scripts
|   │
|   ├── stylus/                                * stylus preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.styl
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.styl
|   │   ├── noscript.styl
|   │   └── screen.styl
|   │
│   ├── 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 sytem: gulp
• Optional: EditorConfig

EditorConfig

Dieses Projekt hat eine Datei .DitorConfig -Datei am Root, die von Ihrem Code -Editor mit EditorConfig Plugin verwendet wird. Es beschreibt den Codestyle wie ein Einrückungsstil, nachfolgende Weißespace usw. Weitere Details finden Sie hier

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

Start

Installieren Sie Bower -Abhängigkeiten und platzieren Sie sie in Entwickler. Gulp: gulp start

• Installieren Sie die Bower -Komponenten
• Kopieren Sie die Bower -Komponenten in den Entwickler des Entwicklers
• Entfernen Sie Gitkeepateien

Dev

Dev -Aufgabe mit statischer Server. Gulp: gulp dev

• Kompilieren Sie Stylus -Stylesheets
• Fügen Sie Herstellerpräfixe in CSS hinzu
• Kombinieren Sie Medienabfragen in CSS -Dateien
• Mopsvorlagen kompilieren
• Synchronisierungshelfer und andere Vermögenswerte
• 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

• Verkettung JavaScripts
• Kompilieren Sie Stylus -Stylesheets
• Fügen Sie Herstellerpräfixe in CSS hinzu
• Kombinieren Sie Medienabfragen in CSS -Dateien
• Mopsvorlagen kompilieren
• Synchronisierungshelfer und andere Vermögenswerte
• 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