Advertisement
  1. Web Design
  2. Terminal
Webdesign

Linha de comando para desenvolvimento web: turbinando o desenvolvimento front end

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Taming 3rd Party Packages
The Command Line for Web Design: Automation with Grunt

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

Como web designer, existem três linguagens que você precisa garantir que domina: HTML, CSS e JavaScript. Neste tutorial vamos explorar os recursos em linha de comando (command line) para tornar o desenvolvimento dessas três linguagens mais eficiente.

Você vai aprender a utilizar a linha de comando para:

  • Compilar estilos CSS (Stylus, Sass e LESS)
  • Autoprefix CSS
  • Compactar, combinar e limpar códigos de estilo CSS
  • Compilar Jade para HTML
  • Concatenar e minificar arquivos JavaScript

Nota: neste tutorial é desejável que você tenha o conhecimento compartilhado nos tutoriais anteriores da série. Se precisar, os tutoriais anteriores podem ajudar bastante.

Pre processadores CSS

Se você nunca trabalhou com um pre processador de CSS, para tudo o que está fazendo agora e teste qualquer solução relacionada. Assim que você encontrar um pre processador que você goste e que se enquadre no seu padrão de desenvolvimento, pode ser que você nunca mais queira programar com o CSS puro.

Os três pre processadores que geralmente são utilizados são Stylus, Sass / SCSS e LESS. O Tuts+ tem um porção de tutoriais e cursos para te ajudar a aprender as sintaxe destes três pre processadores.

Neste tutorial vamos ver como utilizar a linha de comando para compilar o código de cada um dos três.

Stylus

Todo usuário de pre processador tem um favorito, o meu é o Stylus. Utiliza uma sintaxe simples que pode ser escrita rapidamente, tem recursos poderosos, e suporte bibliotecas como o Jeet e Kouto-Swiss.

Você pode ler tudo sobre o Stylus no link: http://stylus-lang.com/

Instalando o Stylus

Para instalar o Stylus globamente, permitindo compilar arquivos ".styl" em qualquer lugar, execute este comando:

Compilando o código Stylus

A maneira mais simples de compilar um código do Stylus é utilizando esta linha de comando:

Esse comando compila o arquivo "example.styl" para o arquivo "example.css" no mesmo diretório.

Para entender melhor, iniciamos o comando com stylus. Depois, utilizamos o < example.styl para indicar o arquivo de origem, seguido do > example.css, que determina o arquivo que esperamos que seja criado.

Você também pode utilizar alguns recursos com este comando, como o --compress, que remove todos os espaços em branco do arquivo final .css.

Você também pode utilizar esse recurso para compilar diversos arquivos em um mesmo diretório para outro diretório. Para fazer isso, após o stylus no comando, especifique a pasta, depois utilize o --out seguindo da pasta de destido.

Por exemplo, para compilar todos os arquivos Stylus de um pasta chamada "source_files" para a pasta "assets/css", utilizamos o comando:

Nota: a pasta que você deseja utilizar para salvar os arquivos compilados deve existir antes de executar este comando, caso contrário é apresentada falha pois o caminho de saída para o arquivo não é encontrado.

Existem outros recursos que podemos considerar quando utilizamos o Stylus através da linha de comando. Para mais informações acesse: http://stylus-lang.com/docs/executable.html

Sass / SCSS

O Sass hoje é o pre processador CSS mais popular. É extremamente poderoso em termos de recursos e tem uma extensa e ativa comunidade. É suportado por bibliotecas como Compass, Bourbon e Susy.

Leia mais sobre o Sass no link: http://sass-lang.com/

Você tem duas opções se deseja compilar arquivos Sass em sua máquina: pode utilizar Ruby, ou então o LibSass.

O Sass foi criado para rodar em Ruby, e se você procura por uma solução 100% completa e com suporte, essa é a melhor opção. Por exemplo, se você deseja utilizar o Compass, a maneira mais simples é utilizando o compilador em Ruby.

O LibSass foi criado como uma alternativa, e um de seus principais objetivos é tornar a utilização do Sass viável através de pacotes npm. Essa abordagem compila o Sass muito mais rápido. Um processo de 5 segundos com Ruby, ficaria algo em torno de meio segundo com LibSass. Porém, você pode encontrar dificuldades relacionadas a recursos de terceiros.

A sua escolha pode ser uma preferencia pessoal, mas eu sugiro que utilize o LibSass pela performance, a não ser que precise utilizar algum recurso especifico que precise do compilador em Ruby.

Apesar da sua escolha, vamos analisar os dois métodos, assim você já fica preparado para qualquer evento.

Instalando o Ruby Sass

Para compilar o Sass com Ruby, você primeiro precisar ter o Ruby instalado na sua máquina.

Se você utiliza Mac, não precisa fazer nada, pois o Ruby já é nativo no sistema.

Se você utiliza WIndows, vá ao link http://rubyinstaller.org/ e baixe o instalador. Depois, instale o Sass executando este comando:

O Sass deve ser baixado e instalado automaticamente para você. Para checar se a instalação foi bem sucedida, execute o comando:

O terminal deve retornar a versão e o nome da instalação do Sass no equipamento:

Compilando Sass com Ruby

Para compilar um arquivo Sass utilizando Ruby, basta executar o comando sass, seguido do nome do arquivo de origem, espaço, nome do arquivo CSS que você deseja que seja criado:

Monitorando o arquivo com Ruby Sass

O Ruby Sass também possui um recurso nativo de monitoração de arquivos que monitora mudanças nos arquivos especificados no comando e compila o mesmo novamente sempre que essa mudança ocorre.

Para utilizar o recurso, adicione --watch ao seu comando, e depois separe os nomes da origem e destino com uma vírgula ao invés de espaço:

Você também pode monitorar diretórios inteiros:

Assim que o monitoramento é iniciado, você deve ver algo como o exemplo abaixo no terminal:

Mais informações sobre os comandos

Para ver todas as opções de comentos disponíveis no Ruby Sass execute o comando:

Um guia vai ser exibido no terminal:

Você pode utilizar --help no comando para mais informações sobre qualquer comando que você utilizar. Apenas entre com o nome do comando seguindo de --help e você terá mais informações relacionados ao comando.

Instalando o LibSass / node-sass

Se você deseja utilizar o LibSass, você pode utilizar o mesmo método que você utilizou para instalar pacotes npm nos outros tutoriais da série.

O LibSass foi escrito em C/C++ mas existem diversas implementações dele, incluindo algumas focadas no Node.js. No nosso caso, vamos utilizar o pacote node-sass.

Para instalar o node-sass globalmente, execute este comando:

Compilando com o node-sass

Para compilar um arquivo entre com node-sass seguindo do nome do arquivo de origem e o nome que você quer para o arquivo de saída.

Para gerenciar o diretório no qual o arquivo CSS é compilado, adicione --output e especifique o diretório no meio dos nomes do arquivo de origem e de saída:

Monitoramento com o node-sass

Com o Ruby Sass, o node-sass também utiliza --watch no comando para automatizar a compilação dos arquivos quando houver mudanças:

Você inclusive pode especificar diretórios inteiros para monitorar, ao invés de um arquivo:

Quando utilizar o node-sass para monitorar um diretório inteiro, não esqueça de incluir /* no fim para especificar que você quer utilizar todos os arquivos neste.

Parando o processo "watch"

Quando você desejar parar o processo "watch", você pode: 

  • Fechar o terminal.
  • Pressionar as teclas CTRL + C

LESS

O pre processador LESS também é muito popular, e provavelmente é muito conhecido devido ao seu uso junto ao framework Bootstrap. O LESS é um ótimo pre processador para iniciantes e é muito parecido com o CSS padrão.

Leia mais sobre o LESS no link: http://lesscss.org/

Instalando o LESS

Para instalar o LESS globalmente, permitindo compilar arquivos ".less" em qualquer diretório, execute o seguinte comando:

Compilando Less

Abra o terminal na pasta onde se encontra o um dos arquivos lessc seguido do nome do arquivo, um símbolo >, e para finalizar o comando, o nome do arquivo CSS que você deseja que seja compilado:

Autoprefix CSS

Autoprefixer é um pacote npm que verifica, com auxílio do CanIUse.com, quais propriedades CSS precisam de prefixes. Depois ele adiciona automaticamente os prefix necessários ao seu código compilado.

Esse recurso é incrivelmente útil para desenvolvedores, para por exemplo, driblar a declaração de prefix não mais utilizados. Você não precisa mais acompanhar de perto as atualizações dos navegadores para saber quais prefix deve utilizar. Isso também significa que você pode escrever todo o seu cógido CSS sem nem pensar em prefix, podendo deixar tudo por conta do Autoprefixer.

Por exemplo, o autoprefixer vai transformar o seguinte código:

...nisso:

Mais informações sobre o Autoprefixer no link: https://www.npmjs.com/package/autoprefixer

Instalando o Autoprefixer

Para instalar o Autoprefixer globalmente, utilize o comando:

Executando o Autoprefixer em um arquivo CSS

Para aplicar o autoprefix em arquivo CSS, utilize o seguinte comando:

Esse processo não vai criar um novo arquivo, como os processos anteriores. O arquivo em questão vai ser atualizado, inserindo os prefix necessários.

Se você deseja que o Autoprefixer gere um arquivo separado, basta adicionar o parametro --output ao comando seguido do nome que você deseja para o arquivo:

Otimizando o CSS

Semrpe desejamos que o arquivo CSS enviado para o servidor tenha o menor tamanho possível. Para isso, podemos utilizar algumas técnicas de otimização:

  • Compression - remove espaços em branco e comentários.
  • Cleaning - modifica o código para ocupar menos espaço.

Comprimindo arquivos com Preprocessadores

Tanto  o Stylus, quanto o Ruby Sass e o node-sass possuem recursos para comprimir o seu arquivo durante a compilação.

No Stylus, inclua o parametro --compress:

No Ruby Sass inclua o parametro --style, seguindo do compressed:

No node-sass adicione o parametro --output-style seguido do compressed:

Criando um arquivo mais enxuto com o clean-css

Se você não está utilizando preprocessadores CSS, e apenas deseja otimizar o seu arquivo CSS, você pode utilizar o package clean-css, que executa processos de otimização mais avançados.

O processo de compressão padrão apenas remove os espaços em branco e os comentários do arquivo CSS. O clean-css, por outro lado, pode fazer muito mais:

  • Unificar nomes de seletores duplicados
  • Unificar propriedades declaradas com o mesmo estilo
  • Arredondar números com várias casas decimais
  • Remover ponto e vírgula e espaços ao final dos estilos do seletor.

Unificar seletores duplicados pode ser uma mão na roda, por exemplo, se você quiser que todas as propriedades de layout fiquem no arquivo "layout.css" , enquanto as cores para a mesma class utilizada está no arquivo "colors.css".

Arredondar números também pode ser muito útil quando utilizamos preprocessadores para calcular medidas rem e nos deparamos com resultados como 2.3649858573rem. Com o clean-css esse número seria arredondado para apenas duas casas decimais, retornando um valor mais compreensivel (2.36rem).

Você pode obter mais informações sobre o clean-css no link:https://github.com/jakubpawlowicz/clean-css

Instalando o clean-css

Para instalar o clean-css globalmente, utilize o seguinte comando:

Para utilizar o clean-css:

Para aplicar a limpeza do clean-css em um arquivo CSS utilize o comando:

Nota: apesar do nome do package ser "clean-css", com hífen, na hora de declarar os comandos não é necessário declarar dessa maneira, podemos utilizar o cleancss para inciar os comandos. 

Para determinar que o clean-css vai gerar um novo arquivo, utilize o parametro -o seguido do nome do arquivo, antes do nome do arquivo apontado.

Existem outros comandos disponíveis para o clean-css, você pode ter acesso a link completa no link: How to use Clean CSS CLI (inglês).

HTML & JavaScript

Jade

Jade é uma linguagem incrível utilizada para otimizar o desenvolvimento da linguagem HTML, permitindo escrever um código mais enxuto, que ao ser compilado gera o mesmo resultado, além da possibilidade de gerar templates, que facilitam a manutenção do código.

Leia mais sobre o Jade no link: https://www.npmjs.com/package/jade

Instalando o Jade

Para instalar o Jade globalmente utilize o comando:

Compilando um arquivo Jade

O Jade, foi criado pela mesma pessoa que criou o Stylus, e utiliza a mesma sintaxe básica com os sinais <> para compilar um arquivo:

Esse comando via compilar o arquivo "index.jade" em "index.html" no mesmo diretório.

Para compilar todos os arquivos jade em um determinado diretório utilize o comando:

Para definir o caminho que você quer que os arquivos HTML sejam compilados, basta adicionar o parametro --out entre o nome de input (arquivo de entrada) e o output (arquivo de saída):

Para usar a função watch para automaticamente compilar o arquivo se houver mudanças, utilize o parametro --watch logo após o comando.

Para um unico arquivo:

Ou para diretórios inteiros:

Concatenando e minificando arquivos JavaScript

Assim como desejamos otimizar a performance dos arquivos CSS, também desejamos fazer o mesmo com arquivos JavaScript.

É muito comum termos multiplos arquivos JS nos projetos, assim como os indispensáveis Modernizr, jQuery, além dos nosso próprios arquivos, mas a intenção é que também possamos melhorar a requisição destes no servidor. E claro, queremos garantir que nosso código JavaScript seja carragado rapidamente.

A melhor maneira de conseguir isso é concatenando os arquivos JavaScript em um unico arquivo, o que significa apenas um request do servidor para carrega-lo, e minificando o arquivo, para garantir que ele vai ter o menor tamanho possível.

Vamos utilizar o package UglifyJS para executar este processo.

Para instalar o uglify-js globalmente utilize o comando:

Para combinar dois arquivos JavaScript e depois remover os espaços em branco, utilizamos o comando uglifyjs seguido do nome dos arquivos que você deseja que sejam processados, separando um a um com espaço. Depois inclua o parametro --output e o nome que você quer para o arquivo processado:

Além de remover espaços em branco e comentários, você também pode comprimir o arquivo, o que também reduz seu tamanho. Para isso, adicione o parametro --compress ao fim do comando:

Outra opção de otimização disponível seria a "mangle", que vai reduzir os nome de variáveis, funções e argumentos para um unico caractere. Para utilizar essa opção, adicione o parametro --mangle no fim do comando:

Você também pode utilizar a compressão e o mangle ao mesmo tempo, conforme o exemplo:

Leia mais sobre os comandos que UglifyJS tem a oferecer no link: https://www.npmjs.com/package/uglify-js

Nota sobre minificar dependências JavaScript

Se você está executando o processo de otimização JS em arquivos como o jQuery, Modernizr e outros, tenha certeza que está utilizando a versão completa destes arquivos. Não é uma boa idéia minificar um arquivo que já passou por esse processo, você pode corromper suas funcionalidades.

Você pode facilmente indentificar o arquivos que já passaram por esse processo, pois geralmente estes arquivos apresentam a extensão "min.js".

No proximo tutorial

Bom, agora você já sabe como executar tarefas úteis com varios packages e comandos diferentes, mas e se você pudesse completar todas as tarefas inicias de um projeto com apenas um comando?

No proximo tutorial vamos explorar como fazer exatamente isso, utilizando gerenciadores de tarefas para configurar as tarfefas de acordo com o projeto, tudo com apenas um comando.

Nos vemos no proximo tutorial!

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

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.