Linha de Comando para o Web Design: Introdução

Por muito tempo, acreditava-se que trabalhar com a linha de comando estavam além dos reinos do web designers. Ela era usada, quase exclusivamente, para trabalhos relacionados à administração de servidores e de arquivos, que nada tinham a ver com os processos diários do web designer mediano.

Pode ter sido assim no passado, mas, hoje, está bem distante da verdade.

Nos dias de hoje, há milhares de ferramentas de linha de comando disponíveis, especificamente, para fluxos de trabalho e linguagens do front end. Por conta dos enormes benefícios que elas oferecem, a linha de comando tem se tornado uma habilidade, cada vez mais, essencial para web designers.

Admito, mesmo depois de descobrir essas ferramentas para web design, ainda me sentia um pouco "amedrontado pela linha de comando". Era influenciado pela ideia que era “para programadores, não designers” e sempre busquei outras opções ao invés de dar uma chance para a linha de comando.

Finalmente, decidi tentar, quando um certo projeto que queria usar requeria interação através da linha de comando. Inicialmente, estava um pouco intimidado, mas, para minha grata surpresa, peguei-me pensando: 

“Isso é maravilhoso, não sei o porque de não aprender isso anos atrás!”

Hoje, uso a linha de comando em quase todos os projetos de web design que participo e não saberia viver sem ela. É incrivelmente útil em quase todos os estágios de um processo típico de um projeto para web.

Sobre Esta Série

Mas, o seguinte: mesmo agora, eu não seria capaz de fazer a maioria das coisas que você encontra em um típico tutorial “primeiros passos na linha de comando”, se minha vida dependesse disso. Se você nunca aprender a usar mkdir, cd ou ls, não importa. A verdade é que, enquanto web designer, você não precisa dessas coisas. As únicas habilidades de linha de comando que você precisa são aquelas que, diretamente, facilitam a criação dos seus projetos web de forma masi eficiente.

E é por isso que essa série não é sobre “como executar comandos obscuros para tarefas que você nunca realizará”. Nem sobre “processos de desenvolvimento complicados, simplificados para designers”, ou coisa do tipo. Esta é uma série, especificamente, para web designers, mostrando como utilizar ferramentas que são incrivelmente úteis para projetos de web design.

Uma vez que começar a usar a linha de comando em seus processos de design, ela abrirá um novo mundo de opções, salvará muitas horas do seu precioso tempo e, prometo, nunca precisará voltar atrás.

O Porque da Linha de Comando ser Ótima para Web Design

Durante esta série de tutoriais, você aprenderá processos voltados para a linha de comando que, talvez, mudem sua abordagem em relação ao web design, permanentemente.

Após apresentá-lo o básico, iremos direto para as habilidades práticas que você poderá usar, imediatamente. Quando vir cada tópico que cobriremos, começará a ver o porque da linha de comando ser uma ferramenta obrigatória para o web design.

Os Principais Tópicos Abordados

Passemos, rapidamente, pelos tópicos que cobriremos durante a série. Há cinco áreas principais:

1. Dominando Pacotes de Terceiros

Web designers costumam usar pacotes de terceiros, como jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css e inúmeros outros. Antes da linha de comando, usar esses pacotes era o mesmo que:

1. Manter um favorito de sites onde você poderia baixar uma versão atualizada de cada pacote;
2. Visitar os sites listados para baixar os pacotes, toda vez que precisar;
3. Repetir o processo todo quando o pacote for atualizado;
4. Transferir, manualmente, a versão atualizada, em cada projeto que ela é usada.

Lidar, manualmente, com a administração de pacotes é um processo demorado e chato, mas, com a linha de comando, é algo do passado.

Você pode baixar pacotes, diretamente em seu diretório, digitando apenas algumas palavras, como:

 bower install jquery

Você pode manter pacotes atualizados, digitando outro conjunto simples de palavras, como:

 bower update jquery

Sem essa de baixar manualmente os pacotes em cada um dos sites, ou atualizá-los manualente quando preciso. Isso é só o começo das coisas que você pode fazer através da administração de pacotes via linha de comando.

2. Aprimorar Código Front End

As três linguagens mais prováveis de ver usadas em um projeto de web são o CSS, HTML e JavaScript. As ferramentas de linha de comando permitem maneiras novas, mais eficientes e mais poderosas de produzir e entregar códigos nessas linguagens.

Umas das coisas mais poderosas que podemos usar na linha de comando com o CSS é o Pré-processador, como o Stylus, Sass / SCSS e LESS. Com a linha de comando, rapidamente, você pode compilar qualquer arquivo de préprocessador, digitando algumas poucas palavras. Você também pode automatizar a compilação de seus arquivos, de modo que seus arquivos CSS sejam recompilados, toda vez que houver mudanças nos arquivos do pré-processador.

Através da linha de comando, podemos aprimorar mais ainda nossos fluxos de trabalho com CSS, com autoprefixamento, limpeza de arquivos e compressão. De forma similar, podemos otimizar nossos arquivos JavaScripts, lançando mão da concatenação e compressão.

E para o HTML, podemos usar linguagens como a Jade, que nos permite escrever HTML de forma reduzida quando criar sistemas de modelos que previnem termos de reescrever trechos d código que se repetem pelos projetos.

3. Automação com Executadores de Tarefas

Ser capaz de compilar CSS com algumas palavras, depois comprimir JavaScript com outras poucas palavras, é ótimo. Mas, as coisas ficam super poderosas mesmo quando você pode fazer tudo em seu projeto, tudo de uma só vez, com um único comando.

Ao usar os chamados “executadores de tarefas”, um comando de palavra única, como gulp ou grunt, pode ser configurado para compilar seus arquivos do pré-processador e então combinas, autoprefixar, limpar e comprimir o CSS resultando, depois compilar seus arquivos Jade em HTML, por fim, concatenando e comprimindo seus arquivos JavaScript-tudo em questão de poucos segundos.

Você também pode configurar os executadores de tarefas para lidar com essas tarefas, automaticamente. Após executar um comando como gulp watch ou grunt watch, você pode continuar trabalhando nos arquivos de desenvolvimento que, em plano de fundo, toda a compilação e otimização é feita, automaticamente e imediatamente.

Executadores de tarefas são bastante flexíveis e podem ser configuradas da forma que quiser, logo, não há fórmulas exatas para como seus projetos podem ser configurados. Simplesmente, ajuste as coisas de acordo com as necessidades de cada projeto.

4. Atualização Em Tempo Real, Sincronização de Navegadores & Teste Com Múltiplos Aparelhos

Atualização em Tempo Real tira a necessidade de atualizar as páginas dos navegadores, permitindo que se concentre em deixar as coisas masi fluidas, com respostas em tempo real para as mudanças no seu projeto.

Após automatizar com os executadores de tarefas, você pode adicionar atualização em tempo real, misturando com qualquer configuração criada para seu projeto. Você pode decidir quais os gatilhos para a atualização, seja uma compilação do pré-processador, mudanças no HTML ou qualquer coisa que desejar.

Por habilitar a atualização em tempo real, você terá uma pré-visualização do site de forma local (localhost, uma simulação de um servidor web executando em sua máquina local). Isso é ótimo para garantir que tudo funciona como pretendido, através dos protocolos https://, ao invés dos protocolos file://.

Além disso, você também aprenderá como sincronizar navegadores, onde você recebera uma URL que poderá usar entre diversos navegadores e fazê-los executarem de modo sincronizados. Por exemplo, clicar em um botão de navegação no Chrome e ver como o Firefox, Opera e Safari respondem à mesma ação, simultaneamente.

E a sincronização entre navegadores não está limitada ao mesmo dispositivo. Você também pode acessar a mesma URL em sem tablet, celular ou qualquer outro aparelho usando a mesma conexão, fazendo todos apresentar uma pré-visualização sincronizada. Isso tudo junto para fornecer a melhor configuração para testes entre navegadores e aparelhos.

E por você construir isso com base na sua configuração dos executadores de tarefa, tudo fica disponível ao usar um comando de duas palavras, como grunt start ou gulp start.

5. Estruturação de Novos Projetos

Estruturar novos projetos manualmente pode ser bem complicado. Fazer com que toda a estrutura de arquivos e diretórios estejam conectados e funcionando em conjunto pode levar muito tempo.

Ao usar a linha de comando, porém, você pode estruturar todos os tipos de projetos em segundos, perfeito para quando quiser usar um framework de terceiro como o Foundation, Bootstrap, HTML5 Boilerplate ou Google Web Starter Kit.

Com os métodos que cobriremos, seus projetos recém estruturados terão, além de todo o código que precisam, todos os executadores de tarefas pré-configurados, de modo que coisas como compilação automática e pré-visualização local já estejam disponíveis de primeira.

Continuando

Certo, se estiver pronto, você pode conferir o primeiro tutorial!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!