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:

1. Tot ce este în directorul dist este generat de Grunt. Orice se editează manual în acest director se pierde.
2. 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.
3. Prin urmare, folderul src poate fi șters (sau se poate bloca accesul prin .htaccess) în producție.
4. 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ă:

1. Grunt-WP
2. Assets (ce este folosit ca submodul)

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.