Close

25/05/2015

Grunt e o workflow no FED

Seja você o único front-end developer da sua empresa ou membro de uma equipe, ter um processo de trabalho bem definido é extremamente importante, já que define a maneira como deve receber seus projetos, sua execução e a entrega, seja diretamente ao cliente ou para que outra equipe dê continuidade até chegar no produto final.

Sendo assim este artigo tem como intuito apresentar o Grunt, ferramenta que visa automatizar processos repetitivos de projetos front-end.

O que é o Grunt?

Grunt é um “javascript task runner“, ou seja, uma ferramenta que executa tarefas em javascript. Sua principal função é realizar tarefas repetitivas que exigiriam trabalho manual, mas podem ser feitas de modo automático, seja com um simples comando no terminal (no caso do Mac) ou quando algum arquivo é modificado.

O interessante é não precisarmos baixar algum aplicativo desktop pago que esteja ligado a uma empresa, assim dependemos somente da comunidade e a disponibilidade de todas as ferramentas atualizadas.

Para que usamos o Grunt?

Temos utilizado Grunt para diversas tarefas que vão desde a criação de estrutura base dos projetos até a otimização de imagens. Essa padronização no workflow nos dá mais consistência, pois as tarefas não dependem de atividades manuais, eliminando chances de erro ou até do desenvolvedor esquecer algo no processo:

  • Framework FED para estruturação do projeto;
  • Bower para administrar os plugins JavaScript;
  • Compilar SASS em CSS, além de minificar e concatenar;
  • Autoprefixer para inserir prefixos nas propriedades mais recentes do CSS automaticamente, sempre atualizando sua base caso os navegadores não necessitem mais deste recurso;
  • Otimização de imagens;
  • Criação de arquivo único com todos os SVGs para usarmos como sprites;
  • Concatenação, verificação e minificação de arquivos JS;
  • BrowserSync para atualização e injeção de código CSS direto no browser, a cada atualização no front-end, para que não seja necessário recarregar a página (em todos os dispositivos simultaneamente).

A lista com todos os plugins grunt utilizados em nosso workflow pode ser vista na própria página do grunt-init-framework-fed. Além disso, faremos uma série de artigos explicando alguns deles em detalhes para esclarecer o porque de usá-los também.

O que preciso fazer para iniciar o uso do Grunt?

Você precisa de algumas ferramentas separadas para aproveitar o potencial do Grunt e, mais especificamente, as ferramentas que exemplificamos anteriormente.

Ferramentas independentes

  • Command Line Tools: se você tem Mac, precisa desta ferramenta para executar alguns comandos no terminal;
  • Node.js: base para todas as demais aplicações;
  • SASS: dependências para que o SASS possa ser compilado;
  • BrowserSync: possibilita o uso do plugin no Grunt para que os browsers sejam recarregados automaticamente;
  • Bower: como dito anteriormente, auxilia na administração dos plugins e pacotes javascript.

Grunt

  • grunt-cli: instalação básica do Grunt, a ser executada pelo Terminal;
  • grunt-init: ferramenta adicional do Grunt, permitindo o uso de templates para criação de projetos (no caso o Framework FED).

Após todas as ferramentas instaladas, você pode iniciar o projeto e colocar os plugins grunt desejados para automatizar seu workflow.

Como iniciar

Após a instalação de cada uma das ferramentas listadas acima, o processo fica bastante simples. Para tanto, vou listar os comandos a serem executados no Terminal (cada $ representa o início de uma nova linha):

$ cd /caminho/da/pasta-do-projeto – entrar na pasta do projeto

$ grunt-init framework-fed – criar projeto utilizando nossa template

$ npm install – instalar todos os plugins definidos no arquivo package.json

$ bower install jquery --save-dev – instalar os pacotes javascript, por exemplo, jQuery, seguido de --save-dev para que seja identificado no arquivo bower.json

$ grunt bower_concattask que unifica todos os pacotes instalados pelo Bower (incluindo seus arquivos CSS) em um só, com excessão do jQuery para evitar problemas futuros. Este comando deve ser feito novamente caso instale um novo pacote no futuro

Ao editar qualquer arquivo javascript todos serão minificados, assim poderão ser requisitados diretamente nos htmls. A partir daí é só executar a tarefa padrão do workflow com o comando abaixo:

$ grunt

Se você estiver rodando servidor local, o BrowserSync já estará utilizando o endereço localhost:3000 para que o navegador seja atualizado e sincronizado entre desktop e mobile (no arquivo Gruntfile.js consideramos a porta 8888 – padrão do MAMP – para que o BrowserSync funcione corretamente).

Veja abaixo vídeo exemplificando todo esse processo com uso do template Framework FED para Grunt:

O processo de download de todos os plugins Grunt inicia no 00:42 e vai até 03:14.

Se você usa outros plugins ou até ferramentas diferentes (como Gulp), fique a vontade para comentar e fazer suas indicações!

  • Cleverson

    Material fantástico. Gostaria de um tuto assim nos áureos tempos quando entrei nesse mundo.

    Não podemos esquecer que com o Grunt e o Gulp podemos também fazer automatização de testes com o Karma, e poder rodar caras como o Jasmine e ferramentas similares.

    E para quem usa Visual Studio 2013 ou superior já é possível fazer a integração do Grunt/Gulp na parte front end.

  • Ótimo artigo, era o que eu estava procurando! 😀
    Só uma pergunta: Qual o nome desse tema sublime text? Muito bonito *u*

    • Carlos Eduardo de Souza

      O tema é o “Aurora (SL)” do SublimeLinter.

      Obrigado Felipe!