1. devfuria.com.br
  2. nodejs
  3. oldtutorial-sobre-o-template-jade-node-express

Tutorial sobre o template Jade (node + express)
Aprenda com este tutorial os primeiros passos com o template Jade (express.js)

O Jade é um template engine muito utilizado em conjunto com o [Express.js].s

Este é um tutorial introdutório sobre o Jade. Irei focar o tutorial no Jade, a integração dele com o Erxpress ficará para um próximo artigo.

Abaixo vemos um exemplo da sintaxe do Jade:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple templating language with a
        strong focus on performance and powerful features.

Que, após convertido, se transformará em…

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Jade is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

No Jade é preciso respeitar o espaçamento entre as tags separando cada tag por tabulação ou por espaços. Não é permitido ter uma página utilizando os dois meios, ou é um ou é outro.

O site www.learnjade.com mantém um tutorial genial para entender como o Jade funciona. Na aba “Jade Tour” é possível ver exemplos bastantes lúdicos.

Veja outros exemplos:

sintaxe jadeserá convertido em html....
p Hello, World!<p>Hello, World!</p>
p<p></p>
div<div></div>
h1<h1></h1>
img<img/>
input<input/>

Começo rápido

Primeiro, vamos instalar a biblioteca a partir do npm. Para tal, vamos criar uma pasta qualquer para o nosso experimento.

mkdir ~/seu-projeto
cd ~/seu-projeto

No terminal execute como usuário comum:

npm install jade -g

Você deve ver algo parecido com o seguinte.

jade@1.8.2 node_modules/jade
├── character-parser@1.2.1
├── void-elements@1.0.0
├── commander@2.5.1
├── mkdirp@0.5.0 (minimist@0.0.8)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
├── with@4.0.0 (acorn-globals@1.0.1, acorn@0.8.0)
└── constantinople@3.0.1 (acorn-globals@1.0.1)

Para testar execute jade --version, a minha versão instalada foi a 1.8.2.

Experimente no terminal…

$ node
> var jade = require('jade');
> var fn = jade.compile('string of jade');
> var html = fn();
> html
'<string>of jade</string>'

Sites oficiais