Zrozumienie struktury plików

Po wykonaniu komendy fronthack init, zastajemy następującą strukturę plików.

src/

Katalog wejściowy. Zawiera pliki źródłowe takie jak Sass, partie HTML i niezminifikowany javascript. To właśnie tutaj tworzy się swój kod.

  • designs - miejsce, w które należy wgrać pliki z designami, aby wyświetlić je później pod kodem w przeglądarce. Więcej w rozdziale Kodowanie pierwszej strony.
  • fonts - katalog przechowujący samodzielnie wygenerowane fonty. Domyślnie znajduje tu się pakiet fonta ikonowego WAAT, który jest niezbędny do komponentu .icon.
  • images - miejsce do przechowywania grafik i obrazków.
  • js - miejsce do przechowywania bibliotek Javascriptowych.
  • partials - zawiera pliki mustache, tak zwane partialsy - drobne bloki HTML, które są używane na wielu podstronach takie jak header albo footer. Zostają renderowane w odpowiednich miejscach przez silnik templatkowy Mustache.
  • sass - rdzeń metodologii SMACSS i BEM. Pliki Sass zostają kompilowane do wyjściowego CSS’a i są rozdzielone na następujące podkatalogi:
    • base - stylowanie podstawowych tagów HTML, czyli typografii, tabelek, styli globalnych itp. Dodatkowo znajduje się tutaj całkiem zgrabny Fronthackowy system stylowania formularzy.
    • components - biblioteka komponentów Fronthackowych wykorzystywanych w projekcie.
    • layout - stylowanie elementów strony będących na poziomie layoutu. Tła, marginesy, paddingi różnych sekcji, które są zbyt ogólne żeby być komponentami.
  • index.html - przykładowy, startowy plik wejściowego HTML’a. Można w nim podejrzeć jak używać partialsów Mustache.

dist/

W pełni samowystarczalny katalog wyjściowy, gotowy do wgrania na serwer produkcyjny. Zawiera wyrenderowany CSS, HTML i wszystkie inne niezbędne pliki jak pliki JS, obrazki i czcionki. Edytowanie plików w tym katalogu jest bezcelowe, bo zostaną nadpisane przy następnym odpaleniu komendy npm run build.

  • css - zawiera zminifiowany, kompletny plik CSS, wyrenderowany z Sass’a.
  • fonts - czcionki przekopiowane z katalogu src/fonts.
  • images - pliki graficzne z katalogu src/images, skompresowane za pomocą wbudowanego pakietu imagemin, który zmniejsza ich wagę nawet o 56%!
  • js - zminifiowane pliki js z katalogu src/js.
  • index.html - kompletny plik HTML przekompilowany przez Mustache.

.dev/

Katalog wyjściowy do podglądu rezultatów na żywo. Jest serwowany na localhoście (http://localhost:8000) po odpaleniu komendy npm run dev. W przeciwieństwie do katalogu dist, nie zawiera zminifiowanego kodu, zamiast tego ładuje różne pomocne skrypty JS.

./

Pozostałe elementy w głównym katalogu Fronthack’a:

  • node_modules - zawiera zależne pakiety Npm, niezbędne do działania Fronthack’a
  • htmlhintrc - plik konfiguracyjny HTMLHint. Więcej w sekcji Lintery.
  • sass-lint.yml - plik konfiguracyjny Sass Lint. Więcej w sekcji Lintery.
  • gulpfile.js - plik konfiguracyjny skryptów automatyzacyjnych.
  • package.json - plik konfiguracyjny Npm’a.


Improve this page