Configurar ferramentas de compilação

Crie do zero seu site para vários dispositivos. Aprenda como agilizar o desenvolvimento e criar um site com carregamento rápido usando um pacote de ferramentas de compilação. Todo site deve ter uma versão de desenvolvimento e uma versão de produção.

A versão de desenvolvimento tem todos arquivos de HTML, CSS, JS e imagem em um formato prático para você trabalhar.

A versão de produção usa esses mesmos arquivos, mas os reduzem, concatenam e mesclam, além de otimizar imagens.

Os desenvolvedores Web precisam considerar milhões ao mesmo tempo. A etapa de compilação é uma das mais fundamentais, mas também é a mais complicada de ser iniciada. Você deve determinar todas as tarefas que precisa automatizar, como: Compressão de imagem, redução de CSS, concatenação de JavaScript, teste responsivo, teste de unidade, e a lista continua...

Siga este guia para aprender a melhor forma de estruturar seu fluxo de trabalho para que seus sites já empreguem as melhores práticas desde o primeiro passo.

TL;DR

  • As suas ferramentas do processo de compilação devem ser otimizadas para oferecer maior desempenho; elas devem reduzir e concatenar automaticamente JavaScript, CSS, HTML e imagens.
  • Use o LiveReload ou outras ferramentas similares para facilitar o processo de desenvolvimento.

Antes de começar a codificação, considere a abordagem de otimização e crie a versão de produção do site. Se definir o fluxo de trabalho desde o início, você evitará surpresas desagradáveis no final do projeto e poderá adotar novas ferramentas para agilizar o desenvolvimento e cuidar das tarefas monótonas.

O que é o processo de compilação?

O processo de compilação é um conjunto de tarefas executadas nos arquivos do projeto para realizar a compilação e o teste do código durante o desenvolvimento. Esse conjunto de tarefas é usado para criar a versão de implantação do site. O processo de compilação não deve ser visto como um conjunto de tarefas a serem executadas no final do fluxo de desenvolvimento.

As ferramentas mais populares para implementação do processo de compilação são Gulp e Grunt, sendo que ambas são ferramentas de linha de comando. Se você não tiver experiência com nenhuma das duas, sugerimos o Gulp. Nós a usamos no Web Starter Kit e a recomendamos .

Existem ferramentas com GUIs que podem ser mais fáceis para começar a usar, mas elas são menos flexíveis.

Plataformas compatíveis & nome da ferramenta
OS X / Windows Prepros
OS X CodeKit
OS X HammerForMac

Quais tarefas devem fazer parte do processo de compilação?

Nas seções a seguir, vamos apresentar as tarefas mais comuns que você deve adicionar ao processo de compilação e as tarefas recomendadas para uso no Grunt e no Gulp.

Isso requer muito trabalho de tentativa e erro até obter o resultado desejado e pode acabar com o seu sono se você ainda não tiver experiência com processos de compilação.

Para ver um bom exemplo de processo de compilação, consulte o guia de introdução do Web Starter Kit, que explica como usar o Web Starter Kit e as funções dos comandos no arquivo do Gulp. Você pode usar esse material como referência para ter um processo funcional em pouco tempo e fazer alterações posteriormente se necessário.

Se preferir criar seus próprios processos de compilação e ainda estiver começando a aprender a usar o Gulp ou Grunt, os guias de início rápido são o melhor ponto de partida para descobrir como instalar e executar seu primeiro processo de compilação:

Usar concatenação e minificação para ter um site mais rápido

Você não sabe bem o que significam os termos concatenação e minificação? Concatenação é a mesclagem de vários arquivos, ou seja, é o processo de copiar e colar vários arquivos em um só. A concatenação é importante porque o navegador trabalha de forma mais eficiente se precisar obter apenas um arquivo, em vez de vários arquivos pequenos.

A redução é o processo de redução da contagem geral de caracteres sem alterar o funcionamento do código. Remover comentários ou reduzir um nome grande de variável são bons exemplos de redução. Isso diminui o tamanho do arquivo e permite a conclusão de downloads em menos tempo.

Para redução, use o seguinte:

Tipo de arquivo Gulp Grunt
CSS gulp-csso grunt-contrib-cssmin
JS gulp-uglify grunt-contrib-uglify
HTML gulp-minify-html grunt-contrib-htmlmin

Para concatenação, use o seguinte:

Tipo de arquivo Gulp Grunt
CSS (Sass) gulp-sass ou gulp-useref grunt-contrib-sass ou grunt-usemin
JS gulp-useref grunt-usemin ou grunt-codekit

Observação: Para usar o Sass, é necessário recorrer ao recurso de importação (veja um exemplo no Web Starter Kit)

Otimizar imagens

A otimização de imagens é uma etapa importante para ajudar no aumento de velocidade do site. Você ficará surpreso quando perceber que é possível reduzir consideravelmente o tamanho das imagens sem perder qualidade. O navegador não precisa dos metadados para exibir imagens, então eles são removidos. Um exemplo são as informações da câmera usada para tirar a foto.

Use os módulos a seguir para otimizar imagens.

Gulp & Grunt
gulp-imagemin grunt-contrib-imagemin

Não se perca com os prefixos de fornecedor:

Pode acabar dando trabalho demais incluir todos os prefixos de fornecedor no seu CSS. Use um prefixador automático para adicionar os prefixos necessários:

Gulp vs Grunt
gulp-autoprefixer grunt-autoprefixer

Nota
Se preferir, adicione um pacote Sublime para cuidar da prefixação automática para você.

Jamais use o editor de texto sem atualização em tempo real

Com a atualização em tempo real, o site é atualizado sempre que você faz alterações. Depois de começar a usar, você não conseguirá mais viver sem.

O Web Starter Kit usa a sincronização com o navegador para oferecer suporte a Live Reload.

Gulp vs Grunt
browser-sync grunt-contrib-connect e grunt-contrib-watch

Observação: Se você gostou do conceito de atualização em tempo real, mas não quer se preocupar com o processo de compilação, Addy Osmani escreveu um artigo no HTML5Rocks com várias soluções alternativas (tanto gratuitas quanto pagas).