Template para grunt-init utilizando o Framework FED
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
root
README.md
template.js

README.md

Framework FED

Cria novo projeto utilizando o Framework FED, além de um arquivo básico Gruntfile grunt-init.

Plugins inclusos

Requisitos

Os recursos obrigatórios para funcionamento do grunt e deste template no Mac são os seguintes:

Processo Único

Veja abaixo os passos a serem executados apenas na primeira vez que for utilizar o grunt, para que tenha as ferramentas necessárias instaladas em sua máquina:

Instalação

Após a instalação do Node.Js (via download de pacote no próprio site), você pode executar os seguintes comandos para instalar as outras ferramentas listadas acima:

$ npm install -g grunt-cli
$ npm install -g grunt-init
$ gem install sass
$ npm install -g browser-sync
$ npm install -g bower

Pode ser que seja necessário inserir "sudo" (sem as aspas) no início de cada linha, para não ter problemas com permissão nas instalações.

Cópia do template base em sua máguina

Depois da instalação dos recursos básicos, você pode criar uma pasta chamada '.grunt-init' dentro da pasta do seu usuário no Mac. Depois disso feito, copiamos este repositório git que servirá como template para seus futuros projetos:

$ git clone https://github.com/CarlosSouza/grunt-init-framework-fed.git /Users/nome-do-usuario/.grunt-init/framework-fed

Importante: trocar "nome-do-usuario" pelo nome da pasta do seu usuário no Mac.

(Usuários de Windows, vejam a documentação para o caminho correto)

Workflow

Agora vamos detalhar os passos a serem feitos no início de cada novo projeto. Na linha de comando, entre na pasta do projeto (que deve estar vazia) e escreva o comando abaixo:

$ grunt-init framework-fed

Este template sobresceverá os arquivos atuais, por isso se quiser mantê-los, por favor salve-os em outra pasta.

Com a criação do projeto, baseado em nosso template, você pode instalar todos os plugins de forma automática com o comando:

$ npm install

Bower

Após criar o projeto com este template, execute o comando abaixo para gerar o arquivo json de configuração dentro do projeto:

$ bower init

Depois de criado arquivo json, pode-se instalar os pacotes desejados, por exemplo:

$ bower install jquery --save-dev

Caso não saiba o nome do plugin desejado, é possível realizar uma busca:

$ bower search jquery

Depois de todos os pacotes instalados no Bower, devemos concatená-los no _bower.js e _bower.css (com excessão do jQuery para evitar problemas com outros scripts):

$ grunt bower_concat

A etapa acima deve ser repetida sempre que um novo plugin (ou vários de uma vez) for instalado!

Após essa etapa de preparação, é só executar o grunt normalmente:

$ grunt

Importante: este framework assume que o localhost está utilizando a porta 8888 (MAMP). Caso esteja diferente disso, é só procurar a linha abaixo dentro do arquivo Gruntfile.js e fazer a modificação desejada:

proxy: "localhost:8888"

E se eu precisar trabalhar em um projeto já em andamento?

Neste caso, entre na pasta do projeto existente e digite o seguinte:

$ npm install
$ bower install
$ grunt