proposta de estrutura de diretórios para projetos frontend, sem ou com GruntJS (para executar o GruntJS é necessário ter o Node.js)

01_estrutura_projetos_frontend_sem_gruntjs.md

Sem GruntJS

projeto tradicional

/root
  /shared
     - código compartilhado na aplicação | seguir o modelo de diretórios adotado em /app

  /app
    - código da aplicação em si

    /scripts
      /main
        module.js (definição do nome do módulo principal da aplicação AngularJS)
        routes.js (rodas da aplicação)
        start.js (inicializa o módulo principal)
        
      /components
      /controllers
      /resources
        /mocks
        resourceName.js
        ...
      /services
      /factories
      /...
    /templates
    /styles
    /images
    /...

  /vendor
    - código de terceiros [css|javascript|...] (jquery, twitter bootstrap, ...)    
    /scripts
    /styles
    /images
    ...
  
  /test
    /libs (jasmine)
    /unit
      - seguir o modelo de diretórios adotado em /app

    SpecRunner.html

  index.html (adicionar as referências aos js conforme a ordem de dependência entre os arquivos)

projeto modular

/root
  /shared
     - código compartilhado na aplicação | seguir o modelo de diretórios adotado em /app

  /app
    - código da aplicação em si

    /main
      module.js (definição do nome do módulo principal da aplicação AngularJS)
      routes.js (rodas da aplicação)
      start.js (inicializa o módulo principal)
      
    /useCase1
      /components
      /templates
      /images
      /styles
      controller.js
      resource.js
      mock.js
      service.js
      factory

    /useCase...

  /vendor
    - código de terceiros [css|javascript|...] (jquery, twitter bootstrap, ...)    
    /scripts
    /styles
    /images
    ...
  
  /test
    /libs (jasmine)
    /unit
      - seguir o modelo de diretórios adotado em /app

    SpecRunner.html

  index.html (adicionar as referências aos js conforme a ordem de dependência entre os arquivos)

02_estrutura_projetos_frontend_com_gruntjs.md

Com GruntJS

para executar o GruntJS é necessário ter o Node.js

projeto tradicional

/root
  /shared
    - código compartilhado na aplicação | seguir o modelo adotado em /src

  /src
    - código da aplicação em si

    /scripts
      /main
        module.js (definição do nome do módulo principal da aplicação AngularJS)
        routes.js (rodas da aplicação)
        start.js (inicializa o módulo principal)
        
      /components
      /controllers
      /resources
        /mocks
        resourceName.js
        ...
      /services
      /factories
      /...
    /templates
    /styles
    /images
    /...

    index.html

  /vendor
    - código de terceiros {bower} [css|javascript|...] (jquery, twitter bootstrap, ...)
    /scripts
    /styles
    /images
    ...

  /examples (se for um projeto de componente, colocar os exemplos nesse diretório)
  
  /helpers (códigos auxiliares para serem utilizados pelo GruntJS)
    /grunt
      /config
      /tasks
    /middleware
  
  /test 
    - seguir a estrutura de diretórios, dentro dos diretórios a seguir
    /unit
    /e2e
    
    
  Gruntfile.js (configurações das tarefas automatizadas)

projeto modular

/root
  /shared
    - código compartilhado na aplicação | seguir o modelo adotado em /src

  /src
    - código da aplicação em si
    
    /main
      /tests
        /unit
        /e2e        
      module.js (definição do nome do módulo principal da aplicação AngularJS)
      routes.js (rodas da aplicação)
      start.js (inicializa o módulo principal)
      
    /useCase1
      /tests
        /unit
        /e2e
      /components
      /templates
      /images
      /styles
      controller.js
      resource.js
      mock.js
      service.js
      factory.js      

    /useCase...

    index.html

  /vendor
    - código de terceiros {bower} [css|javascript|...] (jquery, twitter bootstrap, ...)
    /scripts
    /styles
    /images
    ...

  /examples (se for um projeto de componente, colocar os exemplos nesse diretório)
  
  /helpers (códigos auxiliares para serem utilizados pelo GruntJS)
    /grunt
      /config
      /tasks
    /middleware    
    
  Gruntfile.js (configurações das tarefas automatizadas)

TODO: definir as tasks

• grunt prototype- para o desenvolvimento com suporte a prototipação

• grunt dev - para o desenvolvimento acessando ao backend da aplicação

• grunt test - executa os testes da aplicação

• grunt dist - gera a versão de distribuição para ser usada