Foundation 6 para iniciantes — Primeiros passos

Você provavelmente está perguntando por que se preocupar com as ferramentas CLI, quando você tem acesso aos arquivos estáticos JavaScript e CSS que funcionam muito bem. Talvez você apenas precise de uma estrutura padrão e um fluxo de trabalho fácil de usar, e isso é ok.

Tenho certeza que você pode alcançar seus objetivos dessa forma, mas eu sei que existem muitos desenvolvedores que querem ganhar mais controle sobre o processo de construção. Isso incluiria compilação SCSS, concatenação, minificação, otimização de imagem e modelos. Nesse caso, o uso de ferramentas de CLI podem ser uma melhor opção.


Passos

  1. Instalação básica: Node.js, Git, Gulp, Bower, e foundation-cli

2. Criação de projeto e execução do servidor

Instalação

Para começar, existem alguns pré-requisitos. Você precisará ter o NodeJS, Git, Gulp, e Bower instalados para que a ferramenta de linha de comando do Foundation possa funcionar. Após instalação do NodeJS, você pode instalar Gulp e Bower usando o seguinte comando:

npm install --global gulp bower

Para instalar o foundation-cli, use:

npm install --global foundation-cli

Gulp é um kit de ferramentas que o ajudará a automatizar tarefas dolorosas ou demoradas no seu fluxo de trabalho de desenvolvimento. Aqui, podemos pensar em compilação SCSS, minificação, concatenação, mas também compressão de imagem ou outras tarefas úteis. Bower é um gerenciador de pacotes para a web, que permite baixar e instalar bibliotecas front-end através da linha de comando. Por exemplo, instalar jQuery necessita de apenas um comando de uma linha: bower install jquery.

A foundation-cli baixa e instala modelos em branco para qualquer um dos três frameworks: Foundation: Sites, Aplicativos e E-mails. Todos esses modelos estão prontos para trabalhar com Gulp e Bower.

Criação de projeto

Crie um pasta para o projeto, vá até ela pela linha de comando, e digite foundation new para criar um novo projeto com Foundation.

Após a instalação, você deve ter uma pasta de projeto com o nome fornecido durante a instalação. Além disso, todas as dependências devem ter sido instaladas lá. Enquanto estiver dentro da pasta do projeto, use o seguinte comando para montar seu projeto e executar um servidor de teste (Use ctrl+c quando quiser encerrar):

foundation watch

Aqui acontece a mágica! Enquanto este processo está sendo executado, você pode visualizar o aplicativo montado em seu navegador, nesta URL:

http: // localhost: 8080

Enquanto o servidor estiver em execução, quaisquer alterações feitas no HTML, SASS ou JavaScript serão automaticamente processadas e adicionadas ao seu projeto em tempo real.

Você também terá um servidor de interface do usuário para testes, chamado BrowserSync, disponível nesta URL:

http: // localhost: 3001

Como você provavelmente sabe, o trabalho de front-end é difícil porque você precisa testar seu site em muitos dispositivos e em muitas resoluções diferentes. Agora imagine que você tem uma grande mesa com muitos dispositivos diferentes conectados ao seu site. Quando você clicar em algo ou rolar a página, todos os dispositivos farão o mesmo. Isso é ótimo porque você vê em tempo real o que deve ser corrigido e o que não funciona bem.

Ao ser criado, nosso projeto também fornece, automaticamente, seu endereço IP externo. Você pode copiá-lo e colá-lo em todos os navegadores de dispositivos diferentes para se conectar ao mesmo mecanismo BrowserSync e começar a testar.

O BrowserSync também fornece mudanças ao vivo, portanto, se você salvar algo, ele será exibido na janela do navegador sem atualizar manualmente a página. Ele também aparecerá em todos os dispositivos conectados e você obterá tudo isso de graça com os modelos foundation-cli e zurb sem qualquer trabalho adicional. Quão incrível é isso?