simple gallery_responsive template

Template responsif sederhana galeri

Template Template Satu Halaman Galeri Responsif, dirancang dan dikodekan oleh Maxim Orlov.

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

Produk Mockup Dibuat dengan http://magicmockups.com/

Isi

• Struktur folder
• Persyaratan
  • EditorConfig
• Konfigurasi Situs
• Tugas
  • Awal
  • Dev
  • Membangun
  • Membangun kembali
  • Server
• Reload langsung
• Lisensi

Folder dan struktur file

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

Persyaratan:

• Node.js
• Bangun Sytem: Gulp
• Secara opsional: EditorConfig

EditorConfig

Proyek ini memiliki file .EditorConfig di root yang digunakan oleh editor kode Anda dengan plugin EditorConfig. Ini menggambarkan Codeestyle seperti gaya indentasi, trailing whitespace dll. Lihat lebih detail di sini

Konfigurasi Situs

Boilerplate ini menggunakan templat PUG dengan konfigurasi data eksternal. Pengaturan utama dapat ditemukan di file dev/data/config.json . Dan tersedia untuk penggunaan dalam templat dengan config.key-name

Tugas

Inilah kelompok tugas tegukan dengan beberapa penjelasan

Awal

Pasang dependensi bower dan letakkan di folder dev. Gulp: gulp start

• Pasang komponen bower
• Salin komponen bower ke folder dev
• Hapus file gitkeep

Dev

Tugas dev dengan server statis. Gulp: gulp dev

• Kompilasi stylesheet stylus
• Tambahkan awalan vendor di CSS
• Gabungkan kueri media dalam file CSS
• Kompilasi template Pug
• Sinkronkan pembantu dan aset lainnya
• Sinkronkan gambar
• Jalankan Server Statis Browsersync dengan Live Reload menggunakan
• Perhatikan Tugas Perubahan dan Jalankan Dev

Membangun

Membangun tugas. Gulp: gulp build

• Minitify Images
• Minify JavaScript file
• Minify Stylesheets
• Minify html
• Jalankan Server Statis Browsersync

Membangun kembali

Regenerasi dan membangun proyek dengan menjalankan semua tugas. Gulp: gulp rebuild

• Gabungan javascripts
• Kompilasi stylesheet stylus
• Tambahkan awalan vendor di CSS
• Gabungkan kueri media dalam file CSS
• Kompilasi template Pug
• Sinkronkan pembantu dan aset lainnya
• Sinkronkan gambar
• Minitify Images
• Minify JavaScript file
• Minify Stylesheets
• Minify html

Server

Jalankan server tanpa menonton perubahan. Gulp: gulp server

• Jalankan Server Statis Browsersync

Reload langsung

Proyek ini menggunakan BrowserSync sebagai server statis dengan opsi muat ulang langsung yang diaktifkan dan dikonfigurasi.

Lisensi

Mit