Foundation - Proyek Pemula
Anda dapat memulai pengembangan proyek Anda dengan beberapa templat yang tersedia yang dapat diinstal melalui Yeti Launch atauFoundation CLI. Anda dapat memulai dengan proyek baru dengan menggunakan templat ini dengan menggunakan sistem build Gulp untuk pemrosesan Sass, JavaScript, menyalin file, dll.
Template Dasar
Template dasarnya adalah seperti template SASS, yang menyertakan struktur direktori datar dan hanya mengompilasi file SASS dan sebaiknya memiliki template sederhana ini hanya dengan menggunakan SASS. Anda dapat menggunakan template dasar dengan menggunakan Yeti Launch atau menggunakan Foundation CLI menggunakan perintah berikut -
$ foundation new --framework sites --template basicUntuk mengatur ini, pertama jalankan npm install , bower install dan gunakan perintah npm start untuk menjalankannya. Anda juga dapat mendownload file template dari Github .
Template ZURB
Ini adalah kombinasi dari CSS / SCSS, JavaScript, Template Handlebars, struktur markup, kompresi gambar dan menggunakan pemrosesan SASS. Anda dapat menggunakan template ZURB dengan menggunakan Yeti Launch atau menggunakan Foundation CLI menggunakan perintah di bawah ini -
$ foundation new --framework sites --template zurbUntuk menjalankan template ini, ikuti langkah-langkah yang sama yang ditentukan di template dasar. Anda juga dapat mendownload file template dari Github .
Menyalin Aset
Anda dapat menyalin konten di folder src / assets menggunakan Gulp di mana aset akan menjadi folder proyek Anda. Yang penting di sini adalah, file SASS, file JavaScript, dan gambar tidak akan berada dalam proses penyalinan aset ini, karena mereka akan memiliki proses sendiri untuk menyalin konten.
Kompilasi Halaman
Anda dapat membuat halaman HTML di bawah tiga folder yaitu halaman , tata letak , dan parsial yang berada di dalam direktori src / . Anda dapat menggunakan kompiler file datar Panini yang membuat tata letak untuk halaman dengan menggunakan templat, halaman, sebagian HTML. Proses ini dapat dilakukan dengan menggunakan bahasa template Handlebars .
Kompilasi SASS
Anda dapat mengkompilasi SASS ke CSS menggunakan Libsass dan file SASS utama akan disimpan di bawah src / assets / scss / app.scss dan juga sebagian SASS yang baru dibuat akan disimpan di bawah folder ini sendiri. Output dari CSS akan seperti CSS biasa, yang berada dalam gaya bertingkat. Anda dapat mengompres CSS dengan clean-css dan menghapus CSS yang tidak digunakan dari stylesheet menggunakan UnCSS .
Kompilasi JavaScript
File JavaScript akan disimpan di folder src / assets / js bersama dengan Foundation dan semua dependensi diikat menjadi satu ke dalam file app.js. File akan diikat bersama seperti yang ditentukan dalam urutan di bawah ini -
- Ketergantungan Yayasan.
- File akan disimpan di folder src / assets / js .
- File-file tersebut dibundel menjadi satu file bernama app.js .
Kompresi Gambar
Secara default, semua gambar akan disimpan di bawah folder assets / img di bawah folder dist . Anda dapat memampatkan gambar saat membuat untuk produksi menggunakan gulp-imagemin yang mendukung file JPEG, PNG, SVG, dan GIF.
BrowserSync
Anda dapat membuat server BrowserSync yang merupakan pengujian browser tersinkronisasi yang tersedia dihttp://localhost:8000dan dapat melihat template yang dikompilasi menggunakan URL ini. Saat server Anda berjalan, halaman disegarkan secara otomatis saat Anda menyimpan file dan Anda dapat melihat perubahan yang dibuat pada halaman secara real time saat Anda bekerja.