Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

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).