Falando sobre o harpjs

Introdução rápida ao harpjs.

O Felipe Fialho havia postado em um grupo do facebook sobre o site novo dele, e resolvi dar uma olhada para ver o que ele estava usando de bacana. Entre as tecnologias, reparei em um nome diferente, era esse tal de harpjs.

O que eu gostei dele é que não precisamos de muitas configurações para poder usar pré-processadores, isso para quem está começando, ou está fazendo apenas alguns testes, é ótimo também!

Mais um gerador de código estático? Não, ele é um pouco diferente. Como o site deles diz, ele é um servidor web estático com pré-processamento incorporado, ou seja, ele é um servidor que você pode ter lá seus arquivos Jade, Markdown, EJS, CoffeeScript, Sass, LESS, e ele vai servir para você os arquivos html,css e js.

Para começar a usar é bem simples, basta você ter o npm instalado e instalar o harp globalmente via npm.

sudo npm install -g harp 

Pronto, agora o harp está pronto para ser usado. Vamos fazer um “hello world”?

mkdir helloworld
cd helloworld
harp server

O que eu fiz ali em cima é bem simples, criei uma pasta helloworld, entrei nela e rodei o comando harp server. Vamos testar se isso funciona. Com o harp server rodando, vamos criar um arquivo main.styl.

// main.styl
body
    background rebeccapurple
    color white

Se você acessar http://localhost:9000 ele vai mostrar uma página padrão do harp com um erro 404. Vamos criar um arquivo index.jade e linkar com a nossa folha de estilos, lembrando que o main.styl vai gerar um main.css, então é ele que vamos linkar.

doctype html
html
  head
    title Hello World!
    link(rel="stylesheet", href="main.css")
  body
    h1 Hello World!

Agora se você acessar o endereço http://localhost:9000 estará tudo certo com o nosso Hello World.

Pera aí, então todo arquivo .styl que eu criar ele vai servir? E se eu quiser colocar um arquivo que apenas vai ser importado pelo main.styl? Simples! Basta você criar este arquivo com um underline “_ “ antes que ele ignora, isso serve também para pastas.

Vamos criar um arquivo chamado _variables.styl

// _variables.styl
bgcolor = orange

E mudar um pouco o nosso main.styl, vamos importar o _variables.styl e usar a váriavel que criamos bgcolor para o nosso background.

// main.styl
@import "_variavles"
body
    background bgcolor
    color white

Após desenvolver seu projeto usando o harp, você pode compilar isso tudo usando o comando harp compile.

harp compile helloworld

Ele vai gerar uma pasta chamada www, com os arquivos estáticos prontos para serem usados em qualquer servidor que você preferir.

+ helloworld
  - index.jade
  - main.styl
  - _variables.styl
  + www
    - index.html
    - main.css

Você pode fazer deploy da sua aplicação para o Heroku, Github Pages, Microsoft Azure. O legal, é que você pode levar estes arquivos para qualquer outro lugar que vai funcionar. Se mais tarde você quiser usar o gulp para compilar seus arquivos .styl, você pode fazer isso tranquilamente.

Tem muito mais coisas sobre o harp no site, e a documentação é bem explicadinha.

Bom, é isso! Se eu estiver falando bobeira, por favor, deixe nos comentários, ou me dá um toque que eu corrijo aqui.

Abraços e bons estudos. ;)