Temel - Başlangıç Projeleri

Yeti Launch üzerinden kurulabilen bazı mevcut şablonlarla proje geliştirmeye başlayabilirsiniz veyaFoundation CLI. Sass, JavaScript, dosya kopyalama vb. İşlemleri için Gulp inşa sistemini kullanarak bu şablonları kullanarak yeni projeye başlayabilirsiniz .

Temel Şablon

Temel şablon, düz dizin yapısını içeren ve yalnızca SASS dosyalarını derleyen SASS şablonu gibi bir şeydir ve yalnızca SASS kullanırken bu basit şablona sahip olmak iyidir. Aşağıdaki komutu kullanarak Yeti Launch veya Foundation CLI kullanarak temel şablonu kullanabilirsiniz -

$ foundation new --framework sites --template basic

Bunu ayarlamak için önce npm kurulumunu , bower kurulumunu çalıştırın ve çalıştırmak için npm start komutunu kullanın. Şablon dosyalarını Github'dan da indirebilirsiniz .

ZURB Şablonu

CSS / SCSS, JavaScript, Gidon şablonu, biçimlendirme yapısı, görüntü sıkıştırmanın birleşimidir ve SASS işlemeyi kullanır. Aşağıdaki komutu kullanarak Yeti Launch veya Foundation CLI kullanarak ZURB şablonunu kullanabilirsiniz -

$ foundation new --framework sites --template zurb

Bu şablonu çalıştırmak için, temel şablonda belirtilen aynı adımları izleyin. Şablon dosyalarını Github'dan da indirebilirsiniz .

Varlık Kopyalama

Sen içeriği kopyalayabilirsiniz src / aktifler kullanılarak klasör Gulp hangi varlıklar proje klasör olacaktır. Burada önemli olan şey, içeriği kopyalamak için kendi süreçlerine sahip olacaklarından, SASS dosyaları, JavaScript dosyaları ve resimler bu varlık kopyalama işlemine girmeyeceklerdir.

Sayfa Derlemesi

Üç klasör altında , yani src / dizininin içinde bulunan sayfalar , düzenler ve bölümler altında HTML sayfaları oluşturabilirsiniz . Şablonlar, sayfalar, HTML parçalarını kullanarak sayfalar için düzenler oluşturan Panini düz dosya derleyicisini kullanabilirsiniz . Bu işlem, Gidon şablon dili kullanılarak yapılabilir .

SASS Derlemesi

Libsass kullanarak SASS'yi CSS'ye derleyebilirsiniz ve ana SASS dosyası src / assets / scss / app.scss altında saklanır ve ayrıca yeni oluşturulan SASS parçaları bu klasörün kendisi altında saklanır. CSS'nin çıktısı, iç içe stilde olan normal CSS gibi olacaktır. CSS'yi clean-css ile sıkıştırabilir ve kullanılmayan CSS'yi UnCSS kullanarak stil sayfasından kaldırabilirsiniz .

JavaScript Derlemesi

JavaScript dosyaları, Foundation ile birlikte src / assets / js klasöründe depolanacak ve tüm bağımlılıklar app.js dosyasına bağlanacaktır . Dosyalar aşağıdaki sırada belirtildiği gibi birbirine bağlanacaktır -

Vakıf Bağımlılıkları.
Dosyalar src / assets / js klasöründe saklanacaktır .
Dosyalar, app.js adlı tek bir dosyada toplanır .

Görüntü Sıkıştırma

Varsayılan olarak, tüm resimler dist klasörü altındaki assets / img klasöründe saklanacaktır . JPEG, PNG, SVG ve GIF dosyalarını destekleyen gulp-imagemin kullanarak prodüksiyon için oluştururken görüntüleri sıkıştırabilirsiniz .

BrowserSync

Senkronize tarayıcı testi olan bir BrowserSync sunucusu oluşturabilirsiniz.http://localhost:8000ve bu URL'yi kullanarak derlenen şablonları görebilir. Sunucunuz çalışırken, dosyayı kaydettiğinizde sayfa otomatik olarak yenilenir ve siz çalışırken sayfada yapılan değişiklikleri gerçek zamanlı olarak görebilirsiniz.