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.

6 Comentarii to “Structura unui proiect”

  1. 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.

    src
    -index.php
    - ...
    -style.scss
    -css/
    --admin.scss
    -- ...
    -js/
    --script.js
    -- ...
    -images/
    
    dist
    -index.php
    -style.min.css
    -script.min.js
    -images/
    - ...
    
    vendor/
    node_modules/
    ...
    

    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. :)

  2. Sa ma bati daca inteleg ce face acest Grunt, poate scrii un articol despre el, thanks.

  3. Ionuț Staicu

    @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.

  4. Ionuț Staicu

    @Jean: se pare că Andrei mi-a luat-o înainte. Aici explică ce este grunt si cum se configurează :)

  5. 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” :)

  6. Ionut, multumesc pentru link, Andrei chiar scrie bine.

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>