Build de FrontEnds

Este é um script para compilar frontends utilizando:

• Gulp
• AngularJS
• Sass
• NPM

Estrutura de diretórios e arquivos

Os projetos devem seguir a seguinte estrutura para que se possa utilizar este sistema de build.

src
├── app.js
├── assets
│   ├── fonts
│   ├── fonts.json
│   ├── images
│   ├── images.json
│   ├── scripts
│   ├── scripts.js
│   ├── styles
│   └── styles.css
├── controllers
│   ├── [ your-controllers.js ]
├── directives
│   ├── [ your-directives.js ]
├── filters
│   ├── [ your-filters.js ]
├── index.html
├── resources
│   ├── [ your-resources.js ]
├── services
│   ├── [ your-services.js ]
├── vendor
│   ├── fonts
│   ├── fonts.json
│   ├── images
│   ├── images.json
│   ├── scripts
│   ├── scripts.js
│   ├── styles
│   └── styles.css
└── views
    ├── [ your-views.html ]

Incluindo assets

Para cada tipo de asset, existe um arquivo de inclusões que indicam quais assets serão incluidos no build. A ordem de busca destes arquivos inicia na pasta de cada asset (fonts, images, scripts e styles), e caso não seja encontrado, é utilizado o diretório node_modules.

Para assets do tipo fonts ou images, é utilizado um arquivo JSON de configuração, com um Array de assets a serem inclusos (com suporte à glob no caminho). Para scripts, é utilizado um arquivo .js, e para styles, um .css.

Um exemplo simples: incluir todas as imagens no diretório images:

// src/assets/images.json

[
  "*.png",
  "*.jpg",
  "*.jpeg",
  "*.gif",
  "*.svg"
]

Incluindo scripts:

// src/assets/scripts.js

// =require angular/angular.min.js
// =require angular-cookies/angular-cookies.min.js
// =require angular-resource/angular-resource.min.js
// =require angular-route/angular-route.min.js

Incluindo estilos CSS:

/* src/assets/styles.css /*

/* =require bootstrap/dist/css/bootstrap.min.css */
/* =require font-awesome/css/font-awesome.min.css */

Todos os assets são inclusos na ordem de sua declaração nos arquivos de configuração.

Diferença entre assets e vendor

A única diferença entre assets localizados no diretório assets e vendor é que os assets passam por minificação/uglify, enquanto que vendor é apenas copiado para o build. Além disto, assets do tipo styles passam, no final do processamento, pelo processador Sass.

Views do AngularJS

As views podem ser organizadas em subdiretórios, seguindo a convenção de nomenclatura utilizando hífen. Vamos utilizar a seguinte estrutura como exemplo:

...
└── views
    └── users
        └── new.html
        └── edit.html
        └── show.html
            └── foo
                └── bar.html

Em diretivas, outras views ou qualquer lugar aonde estas views sejam utilizadas, o nome do arquivo final é composto de cada subdiretório e o nome do arquivo, separados por hífen. No caso de utilizarmos a view show.html, o caminho ficaria assim:

users-show.html

Ou no caso de bar.html:

users-foo-bar.html