Fundacja - Projekty początkowe

Możesz rozpocząć tworzenie projektu z kilkoma dostępnymi szablonami, które można zainstalować za pomocą Yeti Launch lubFoundation CLI. Możesz zacząć od nowego projektu, korzystając z tych szablonów, używając systemu kompilacji Gulp do przetwarzania Sass, JavaScript, kopiowania plików itp.

Podstawowy szablon

Podstawowym szablonem jest coś w rodzaju szablonu SASS, który zawiera płaską strukturę katalogów i kompiluje tylko pliki SASS i dobrze jest mieć ten prosty szablon, używając tylko SASS. Możesz użyć podstawowego szablonu, używając Yeti Launch lub używając Foundation CLI za pomocą następującego polecenia -

$ foundation new --framework sites --template basic

Aby to skonfigurować, najpierw uruchom instalację npm , bower install i użyj polecenia npm start, aby ją uruchomić. Możesz także pobrać pliki szablonów z Github .

Szablon ZURB

Jest to połączenie CSS / SCSS, JavaScript, szablonu Handlebars, struktury znaczników, kompresji obrazu i wykorzystuje przetwarzanie SASS. Możesz użyć szablonu ZURB, używając Yeti Launch lub używając Foundation CLI za pomocą poniższego polecenia -

$ foundation new --framework sites --template zurb

Aby uruchomić ten szablon, wykonaj te same kroki określone w podstawowym szablonie. Możesz także pobrać pliki szablonów z Github .

Kopiowanie zasobów

Możesz skopiować zawartość w folderze src / asset za pomocą Gulp, w którym zasoby będą folderem twojego projektu. Ważną rzeczą jest to, że pliki SASS, pliki JavaScript i obrazy nie będą objęte tym procesem kopiowania zasobów, ponieważ będą miały własny proces kopiowania treści.

Kompilacja stron

Możesz tworzyć strony HTML pod trzema folderami, mianowicie stronami , układami i częściami, które znajdują się w katalogu src / . Możesz użyć kompilatora plików płaskich Panini , który tworzy układy stron przy użyciu szablonów, stron, częściowych HTML. Ten proces można wykonać za pomocą języka szablonów Handlebars .

Kompilacja SASS

Możesz skompilować SASS do CSS za pomocą Libsass, a główny plik SASS będzie przechowywany w src / asset / scss / app.scss, a także nowo utworzone części SASS będą przechowywane w tym folderze. Wynik CSS będzie podobny do zwykłego CSS, który jest w stylu zagnieżdżonym. Możesz skompresować CSS za pomocą clean-css i usunąć nieużywany CSS z arkusza stylów za pomocą UnCSS .

Kompilacja JavaScript

Pliki JavaScript będą przechowywane w folderze src / asset / js wraz z Foundation, a wszystkie zależności są powiązane razem w pliku app.js. Pliki zostaną powiązane, jak określono w poniższej kolejności -

Zależności Fundacji.
Pliki będą przechowywane w folderze src / asset / js .
Pliki te są powiązane w jeden plik o nazwie app.js .

Kompresja obrazu

Domyślnie wszystkie obrazy będą przechowywane w folderze asset / img w folderze dist . Możesz kompresować obrazy podczas budowania do produkcji za pomocą gulp-imagemin, który obsługuje pliki JPEG, PNG, SVG i GIF.

BrowserSync

Możesz utworzyć serwer BrowserSync , który jest zsynchronizowanym testowaniem przeglądarki dostępnym pod adresemhttp://localhost:8000i móc zobaczyć skompilowane szablony przy użyciu tego adresu URL. Gdy serwer jest uruchomiony, strona odświeża się automatycznie po zapisaniu pliku, a zmiany wprowadzone na stronie można zobaczyć w czasie rzeczywistym podczas pracy.