Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal

Linha de Comando para o Web Design: Entendendo o Básico

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Introduction
How to Install NPM and Bower

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Só é preciso algumas poucas coisas para que você esteja preparado para a parte legal do web design que você pode fazer através da linha de comando. Muitas introduções genéricas à linha de comando focarão em coisas como criação de diretórios, movimentação de arquivos, navegação do sistema e coisas do tipo. Acredito que, no web design, raramente uso esses tipos de comandos.

Quando comecei a aprender a linha de comando, também encontrei vários tutoriais que, geralmente, pulavam a parte introdutória e já mandavam você digitar algumas instruções direto no terminal, como "Digite X Y Z no seu terminal" ou "Execute o comando A B C". Tipicamente, isso deixa alguns novatos pensando "Espera aí, o que é linha de comando? Onde a encontro? Como a abro? Como a uso?"

Neste tutorial, garantiremos que você não passará pelos mesmos problemas. Começaremos do mais básico. Você aprenderá o essencial de como trabalhar com a linha de comando, incluindo abrir; executar comando; repetir comando; usar seu diretório atual para executar comandos; e como lidar com as mensagens de erros mais comuns que encontrará.

Esta série proverá os passos específicos necessários para usuários de Windows e Mac (desculpe, pessoal do Linux). Porém, acredito que, por ser um usuário de Linux, você já possui um certo conhecimento e familiaridade com a linha de comando. Além disso, por ser um "sistema da família *NIX", a maioria dos comandos para Mac são idênticos aos do Linux, assim, você pode acompanhar bem, sem problemas.

Nota Sobre Aplicativos com Interfaces Gráficas (GUI)

Sei o que você deve estar pensando e, sim, é possível usar aplicativos com interfaces gráficas (GUI) para lidar com alguns desses tipos de processos; Eu mesmo uso. Contudo, interfaces gráficas projetadas para todo mundo, por necessidades, são uma solução que generalista. Assim, se você achar que precisa de algo que o aplicativo não é capaz de prover, você estará emperrado.

Ao acompanhar os tutoriais desta série, você terá o conhecimento necessário para criar seus próprios projetos de linha de comando, a qualquer hora, da forma que quiser que eles sejam.

O Que É a Linha de Comando?

Em resumo, a linha de comando fornece-lhe uma forma de evitar o uso de interfaces gráficas, de modo que você consegue ir mais a fundo na forma que as coisas são processadas, além de ter mais controle.

Para deixar a par, quando os computadores chegaram ao grande público, a única forma que você tinha de interagir com eles era através de comandos digitados através das interfaces de linha de comando (CLIs). Eventualmente, as interfaces gráficas de usuário (GUIs) surgiram, dando vida à interação "apontar & clicar" que estamos acostumados nos sistemas operacionais e aplicativos de hoje em dia.

No mundo do web design as coisas evoluíra na direção contrária. Para começar, praticamente todas as ferramentas eram aplicativos baseados em interfaces gráficas. Faz, relativamente, pouco tempo que surgiram soluções para problemas de web design,baseadas em linhas de comando, acessíveis o bastante que o retorno valha o investimento do aprendizado para utilizá-las.

A primeira coisa a entender sobre a linha de comando é que, para usá-la, você precisa de um programa especializado para digitar os comandos. 

Há inúmeras opções disponíveis, contudo, nesta série, usaremos os aplicativos padrões que vem com o Mac e com o Windows. No Mac, o programa usado para trabalhar com a linha de comando é chamado de "Terminal" e, no Windows, é chamado de "Prompt de Comando".

Como Abrir o Terminal / Prompt de Comando

Para falar a verdade, encontrar e executar o terminal/linha de comando, não é algo tão óbvio se não os tiver usado anteriormente. Eis como fazê-lo, tanto no Mac quanto no Windows.

No Mac

No Mac, a forma mais fácil de abrir o Terminal é abrir o Launchpad e pesquisar por Terminal, lá.

O Terminal no Mac parece com isso:

Uma vez executando, fixe-o no seu dock. Confie em mim, você vai querê-lo ali.

No Windows

Para executar a linha de comando no Windows, usamos o Prompt de Comando

No Windows 8: da tela inicial, vá até Apps, e dentro de Windows System escolha Linha de Comando.

Alternativamente, aperta a tecla Windows junto da tecla R para abrir uma janela de execução. No campo chamado Abrir, digite cmd e clique no botão OK para iniciar o prompt de comando.

A janela do Prompt de Comando no Windows parece com isso:

Nota Rápida: Por brevidade, ao invés de dizer “terminal / linha de comando” por toda a série, apenas usarei a palavra “terminal”, de agora em diante, a não ser que eu me refira a instruções específicas do Windows.

Executando e Repetindo Comandos

Para executar um comando, espere até o Terminal estar pronto. No Mac, você saberá disso quando vir o sinal $ que termina a linha e, no Windows, você verá o sinal >:

Terminal do Mac pronto
Prompt de Comando do Windows pronto

Quando vir que está tudo pronto, você pode começar a digitar seus comandos e apertar enter para executá-lo:

Uma coisa super útil a se saber é que, caso queira repetir um comando já utilizado, você pode apertar as setas para cima/baixo do seu teclado, para navegar por esses comandos já usados.

Você perceberá que há comandos que precisarão ser executados mais de uma vez e, poder usar as setas para cima/baixo e apenas apertar enter, é muito mais rápido que redigitar os comandos todos.

Abrir um Terminal em um Diretório Específico

Para a maioria das tarefas de web design que você usará, será preciso apontar seu Terminal para o diretório base do seu projeto. 

Seu Terminal mostrará o nome do diretório que você está trabalhando atualmente:

É possível navegar pelos diretórios do seu computador usando o comando cd, abreviação para “change directory” (alterar diretório). Contudo, você achará muito mais fácil clicar com o botão direito do seu mouse dentro do diretório do projeto e abrir uma janela do Terminal já apontada para lá.

Pessoalmente, sempre faço isso, mesmo que o comando cd seja mais rápido, meu cérebro de designer prefere as coisas dessa forma. Eis como pode fazer em cada um dos sistemas operacionais.

No Mac

Uso um aplicativo chamado XtraFinder (gratuito e possui diversas funcionalidades bem úteis) que permite você a adicionar a opção Novo Terminal Aqui ao menu contextual do Finder.

No Windows

Segure a tecla Shift e pressione o botão direito do mouse dentro do diretório do projeto. No menu contextual, você deverá ver uma opção com os dizeres Abrir nova janela de comando aqui.

No Windows, é assim que sempre abro um novo prompt de comando, uma vez que acho a forma mais fácil de fazê-lo.

EACCES - Você Não Tem Permissão? Sudo.

Uma das coisas que você se deparará bastante enquanto no Mac é uma ou outra versão de mensagem de erro contendo as letras EACCES.

Geralmente, será acompanhado por algo mais ou menos assim “Por favor, tente executar esse comando, novamente, como root/Administrador.”

Se, ou quando você vir isso, apenas significa que você está tentando completar uma tarefa que requer um nível superior de privilégios. Esse sistema existe para garantir que ninguém faça alterações significativas em sua máquina, sem autorização.

A forma mais fácil de verificar que você está autorizado é adicionando a palavra sudo ao início do seu comando, que é uma abreviação para “super user do” (super usuário, faça).

Então, você terá de digitar sua senha antes de continuar.

Ao adicionar sudo antes do seu comando, você trabalhará como “super usuário” do sistema, ao invés de um usuário padrão. Com esses privilégios elevados, você perceberá que o comando funcionará normalmente.

Alternativas ao sudo

Você deve estar a par da existência de outras formas, além do sudo, para passar pelos erros de nível de acesso, como a alteração da forma que as permissões são configuradas na máquina. No entanto, os passos tipicamente requeridos para esses processos estão um pouco além do nível básico que estamos tratando aqui. 

Você ficará bem ao usar sudo no contexto que cobrimos nesta série. Isso dito, quando estiver mais confortável com a linha de comando, você pode pesquisar essas outras opções.

Eis um processo a se favoritar para ajustar problemas de permissão posteriores com o npm, o qual você saberá mais em um próximo tutorial.

Como Indicaremos o Uso do sudo Nesta série

Nas vezes que você talvez precise usar o comando sudo, rescreverei o comando dessa forma:

Isso não quer dizer que você tem de digitar, literalmente, [sudo], com os colchetes. Ao invés disso, você pode precisar usar sudo, por exemplo:

ou

Em dúvida, você sempre pode tentar o comando seu sudo e, depois, tentar com ele, para ver se aparece alguma mensagem com o erro EACCES.

No Próximo Tutorial

No próximo tutorial, começaremos a ver as técnicas que podemos usar em fluxos de trabalhos existentes para web design, ao aprender, passo-a-passo, a usar a linha de comando para gerenciar pacotes de terceiros.

Você aprenderá a usar um pouco de dois dos mais populares sistemas gerenciadores de pacotes. Você aprenderá a encontrar, instalar e atualizar pacotes em seus projetos.

Vejo você lá!

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

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.