Passo a passo para instalação do Frontend Boilerplate (ago/14)

setup-frontend.md

Setup do Frontend (boilerplate)

1. Instale o node.js

2. Via npm instale os seguintes módulos globais:

• gulp
• bower
• browserify
• watchify
• less
• browser-sync

que pode ser feito através da linha de comando

sudo npm install -g gulp bower browserify watchify less browser-sync

• em ambiente windows o sudo é desnecessário

3. Na raíz do projeto, instale os módulos locais do projeto via npm install

O npm install lê o arquivo package.json, efetua download e acomoda os módulos em uma pasta chamada node_modules. Esta pasta consta no .gitignore, pois não deve ser comitada, já que a característica de alguns módulos varia de ambiente para ambiente.

Vale notar que o utilitário npm é instalado junto ao node.js

4. Acomode as dependências de frontend (libs, plugins, etc) via bower install

O bower é um utiliário para gerênciar dependências de pacotes de frontend. Ele lê um arquivo chamado bower.json e entende quais pacotes deve baixar. Ele acomoda-os na pasta bower_components, que fica alojada na raíz do projeto. Esta pasta não deve ser comitada, portanto, está listada também no .gitignore

5. Rode o gulp, através de gulp build

Existe uma task chamada build (descrita no arquivo gulp/task/build.js) que desencadeia uma série de outras tasks que devem construir o frontend do site.

Após a conclusão desta task, o frontend estará alojado na pasta __stage (ou na pasta especificada no arquivo package.json:44 - chave basePath > stage). Em um projeto integrado com Laravel, é possível que o output da task build esteja disposto na pasta public.

É importante notar que a pasta __stage deve constar no .gitignore, já que são arquivos de saída.

Os arquivos de entrada estão comumente na pasta app (ou no caminho especificado no arquivo package.json:43 - chave basePath > application)