Kako organizovati frontend projekat koji raste?

Korak 1: Osnovna struktura

U početku naš projekat ima samo jedan nivo dubine, tj. svi folderi su na istom niovou:

css/
  main.css
js/
  main.js
fonts/
images/
libs/             // sve biblioteke idu ovde

Korak 2: Kreiranje podfoldera i grananje

Već u startu neke stvari možemo svrstati zajedno, na primer fontove i slike u assets, a neke fajlove (css, js) razložiti na manje celine:

assets/
  fonts/
  images/
css/              // razdvajamo css na manje fajlove
  colors.css
  header.css
  main.css
  footer.css
js/               // razdvajamo js na manje fajlove
  header.js
  main.js
  footer.js
libs/

Imajte na umu da se preveliki CSS i Javaskript fajlovi smatraju veoma lošom praksom.

Korak 3: Uvođenje build procesa

Ako je projekat zaista velik, neophodno je uvesti automatizaciju, odnosno build proces. Sada izvorni kod pišemo isključivo u src/ folderu, potom se on kompajlira (spaja, čisti, minifikuje) u dist/ ili build/ folder.

Takođe, brigu o našim bibliotekama preuzima neki paket menadžer (npm, bower, jspm…). Više ne skidamo fajlove sa interneta ručno, već samo dodajemo željenu biblioteku na spisak, a paket menadžer je sam nalazi, skida i ažurira.

assets/
  fonts/
  pictures/
  logos/
src/                // ovde su izvorni fajlovi na kojima radimo
  css/
    colors.css
    header.css
    main.css
    footer.css
  js/
    header.js
    main.js
    footer.js
dist/               // ovde idu izbildovani fajlovi
  css/
    style.min.css
  js/
    script.min.js
node_modules/       // npm preuzima brigu o bibliotekama

Ako ste iskusniji, možete odmah postaviti celu strukturu, ali u početku je bolje da stvari idu polako.

Advertisements

Ostavi komentar

Molimo vas da se prijavite koristeći jedan od sledećih načina da biste objavili svoj komentar:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s