Structura unui proiect
De când am început să scriu cod am avut probleme în a avea o structură cât de cât OK pentru toate directoarele și fișierele folosite:
Prima dată am abordat o metodă extrem de simplă: toate în rădăcina proiectului: un fișier CSS, un folder images
și un folder js
. Asta a mers ceva timp, dar imediat ce au început să vină proiectele ceva mai complexe am ajuns la concluzia că nu se pretează: există mai multe fișiere CSS. Există plugin-uri ce au imagini și/sau fișiere CSS, iar a le pune în rădăcină ar fi însemnat multe foldere inutile.
A doua metodă, folosită intens la câteva proiecte lucrate în echipe ceva mai mari, a fost să pun totul într-un folder numit, assets
: css
, js
, images
. Problema plugin-urilor am rezolvat-o foarte simplu, inspirându-mă din diverse frameworks: un folder vendor
(e.g. vendor/lightbox
).
Această metodă a funcționat foarte bine până când a trebuit să folosesc trei chestii noi: SASS, concatenare și minify pentru Javascript: unde puneam sursele SASS? Unde puneam CSS-ul generat? Unde puneam JS-ul minificat?
Prin urmare, a apărut metoda nr. 3 (folosită de aproximativ doi ani): Avem în continuare un folder assets
dar în interiorul acestui director avem alte două foldere: src
și dist
.
+---dist | +---images | +---javascripts | +---stylesheets \---src +---images | \---sprites +---javascripts +---stylesheets | +---responsive-small | +---screen | | +---components | | \---layout | \---utils | \---mixins \---vendor \---bower_components
Reguli:
- Tot ce este în directorul
dist
este generat de Grunt. Orice se editează manual în acest director se pierde. - Nimic din ce este în directorul
src
nu va fi folosit în producție sau la altceva decât la generarea fișierelor cu Grunt. - Prin urmare, folderul
src
poate fi șters (sau se poate bloca accesul prin.htaccess
) în producție. - Directorul
vendor
este ignorat în VCS, conținutul său fiind generat fie de bower, fie de submodule Git.
Pentru a începe un proiect mai rapid, am modificat baseproject astfel încât să-mi genereze fișierele cu care pot începe treaba și l-am împărțit în două:
Modului Assets este un exemplu de structurare a fișierelor, cu un Gruntfile
și un package.json
; în cazul în care ai nevoie doar de acest modul, trebuie să editezi assets.json
și să înlocuiești {%= name %}
cu numele unui folder existent.
- Posted in:
- baseproject,
- Workflow
- Tags:
- Baseproject,
- Grunt,
- Grunt-init
Eu prefer o metoda mai simpla: un singur src folder si un singur dist folder. Ideea e sa nu consideri CSS/JS cazuri speciale, ci sa pornesti de la ideologia ca src e ce scrii tu si dist e ce merge in productie. E singura regula ce o urmaresc.
Structura asta folosesc eu. Demo Asta e doar un exemplu, de obicei nu bag in repo daca nu am scris eu.
Continuous deployment va genera un dist si il trimite in productie. Daca esti smecher, incrementezi versiunea din package.json si folosesti grunt sa o injectezi in fisierele php cand e nevoie. Totul e automat.
Sa ma bati daca inteleg ce face acest Grunt, poate scrii un articol despre el, thanks.
@Jean: titlul original al articolului era „Structura unui proiect. Grunt”, dar mi-am dat seama că, în afară de task-urile de la finalul articolului, nu prea are nimic legat de Grunt. Prin urmare am început să scriu despre Grunt în continuarea articolului, dar deja se lungea prea mult și am decis să îl sparg în două.
Mai devreme sau mai târziu voi publica și despre Grunt.
@Jean: se pare că Andrei mi-a luat-o înainte. Aici explică ce este grunt si cum se configurează
Si eu am o manie.. din nu stiu ce motiv, mi se urca sangele in cap cand vad fisiere stand in root… am tendinta sa structurez totul in foldere si sa las cat mai putine fisiere “stand-alone”
Ionut, multumesc pentru link, Andrei chiar scrie bine.