Criando um ambiente de desenvolvimento front end mais eficiente

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

Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Tuts+ (Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+). Todos os direitos reservados para Envato.

Link para artigo original: http://webdesign.tutsplus.com/tutorials/the-command-line-for-web-design-powering-up-front-end-code–cms-23453
Autor do artigo original: Kezz Bracey
Link da Envato para o artigo traduzido: http://webdesign.tutsplus.com/pt/tutorials/the-command-line-for-web-design-powering-up-front-end-code–cms-23453

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 globalmente, permitindo compilar arquivos “.styl” em qualquer lugar, execute este comando:

[sudo] npm install stylus -g

Compilando o código Stylus

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

stylus < example.styl > example.css

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.

stylus --compress < example.styl > example.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 destino.

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

stylus source_files --out assets/css

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:

gem install sass

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

sass -v

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:

sass source_file.scss compiled_file.css

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:

sass --watch source_file.scss:compiled_file.css

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

sass --watch source/sass:assets/css

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:

sass --help

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:

[sudo] npm install node-sass -g

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.

node-sass source_file.scss compiled_file.css

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:

node-sass source_file.scss --output assets/css compiled_file.css

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:

node-sass --watch source_file.scss compiled_file.scss

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

node-sass --watch source/sass/* --output assets/css

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:

[sudo] npm install less -g

Compilando Less

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

less source_file.less > compiled_file.css

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:

a {
  display: flex;
}

…nisso:

a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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:

[sudo] npm install autoprefixer -g

Executando o Autoprefixer em um arquivo CSS

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

autoprefixer style.css

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 parâmetro –output ao comando seguido do nome que você deseja para o arquivo:

autoprefixer unprefixed.css --output prefixed.css

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 parâmetro –compress:

stylus --compress < source_file.scss > compiled_file.css

No Ruby Sass inclua o parâmetro –style, seguindo do compressed:

sass source_file.scss compiled_file.css --style compressed

No node-sass adicione o parâmetro –output-style seguido do compressed:

node-sass --output-style compressed source_file.scss compiled_file.css

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:

[sudo] npm install clean-css -g

Para utilizar o clean-css:

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

cleancss style.css

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 parâmetro -o seguido do nome do arquivo, antes do nome do arquivo apontado.

cleancss -o cleaned.css style.css

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:

[sudo] npm install jade -g

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 < e > para compilar um arquivo:

jade < index.jade > index.html

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:

jade dir_name

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

jade src_dir --out html_dir

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

Para um unico arquivo:

jade --watch < index.jade > index.html

Ou para diretórios inteiros:

jade --watch dir_name
jade --watch dir_name --out html_dir

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:

[sudo] npm install uglify-js -g

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 parâmetro –output e o nome que você quer para o arquivo processado:

uglifyjs input1.js input2.js --output input.min.js

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 parâmetro –compress ao fim do comando:

uglifyjs input1.js input2.js --output input.min.js --compress

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 parâmetro –mangle no fim do comando:

uglifyjs input1.js input2.js --output input.min.js --mangle

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

uglifyjs input1.js input2.js --output input.min.js --mangle --compress

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 ideia minificar um arquivo que já passou por esse processo, você pode corromper suas funcionalidades.

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

Conclusão

Bom, agora você já sabe como executar tarefas úteis com vários packages e comandos diferentes.

Nos vemos no próximo tutorial!

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

  • Lucas Leite

    Muito bom, procurava algo do tipo e só tinha encontrado tutorial em inglês (inclusive esse mesmo), obrigado!