Olá pessoal. Nesse artigo vamos conhecer o PUG JS. Uma ferramenta incrível para criar templates, componentizar seu layout e muito mais. Continue lendo para descobrir como funciona.


Você deve está se perguntado “Mas o que é esse tal de PUG JS?”. O PUG é uma ferramente muito parecida com SASS (Não sabe o que é SASS? veja aqui !). Ele é um pré processador de HTML perfeito para componentizar seu template.

A ideia do PUG é agilizar e facilitar o processo de criação e componentização do seu layout. Imagina que você precisa fazer o template de um blog. Você não precisar criar toda a logicar de listar os post e tudo mais, a unica coisa que você precisa é criar o template HTML para que um outro desenvolvedor apliquei a logica backend.

Você pode fazer isso com HTML pura. começando pelo header, main, o footer e tudo mais até a home está pronto. Ai você começa a fazer a página de postagem. O header, o footer o sidebar se repente. Você tem que ir até o HTML da home, copiar o HTML de cada parte e colar na nova página. Isso é muito trabalhoso.

Ou você pode configurar um servido tipo xamp, rodar o PHP e usar o include. Mas isso também daria trabalho… Uma solução é usar o PUG JS.

Pug js para templates de site

Você deve está se perguntando “Provavelmente eu tenho que configurar o pug js também, e isso também vai me dar trabalho”. Sim, você está certo, mas a ideia é criar um ambiente de desenvolvimento que facilite na hora de codificar. Você pode usar um automatizador de tarefas para agilizar ainda mais o seu desenvolvimento. (Quer conhecer um automatizador muito legal, veja nosso artigo sobre Grunt js aqui)

Como no exemplo que eu dei, seria feito um documento HTML para cada página do site. Isso não é muito bom para dar manutenção. Com PUG fica um bem mais fácil. você pode separar o os componentes em arquivos diferentes e ir chamando a medida que for necessário. Como include do PHP.

O que muda com pug js?

O pug tem uma sintaxi muito fácil, ele é muito parecido com SASS. Porem com algumas peculiaridades que para adaptar melhor a escrita. Vamos a um exemplo.

#menu 
    nav 
        ul 
            li 
                a(href="#", target="_blank", rel="noopener noreferrer") Home 
            li 
                a(href="#", target="_blank", rel="noopener noreferrer") Contato 
            li 
                a(href="#", target="_blank", rel="noopener noreferrer") Sobre a empresa

 

Isso seria compilado em

<div id="menu">
    <nav>
        <ul>
            <li> <a href="#" target="_blank" rel="noopener noreferrer">Home</a></li>
            <li> <a href="#" target="_blank" rel="noopener noreferrer">Contato</a></li>
            <li> <a href="#" target="_blank" rel="noopener noreferrer">Sobre a empresa</a></li>
        </ul>
    </nav>
</div>

 

Se você acha que a sintaxi é muito dificil e por isso não vai se adaptar. Você ainda pode continuar escrevendo o HTML de forma convencional que o pug vai aceitar.

 

O que o PUG tem de diferente ?

O PUG JS vem com vários recurso e alguns deles são excelentes para trabalhos recorrentes. Por exemplo, imagine que você trabalha com desenvolvimento de lojas virtual, provavelmente você já tem vários componentes criados na sua cabeça. Alguns deles podem virar mixin, outros podem aparecer só no ambiente de desenvolvimento para ajudar na correção de bugs e muito mais.

Mixin 

Como eu falei no post sobre SASS, mixin são como função só que ao invés de retornar um valor ele retorna o HTML. Um bom uso seria na criação de botões, lista etc…

mixin pet(name) 
    li.pet= name 

ul 
    // Chamando mixin e passando 'cat' como parâmetro 
    +pet('cat') 
    // Chamando mixin e passando 'dog' como parâmetro
    +pet('dog') 
    // Chamando mixin e passando 'pig' como parâmetro 
    +pet('pig') 

 

Resultado

<ul>
    <li class="pet">cat</li>
    <li class="pet">dog</li>
    <li class="pet">pig</li>
</ul>

 

Código sem buffer

Você pode utilizar as diretivas que toda linguagem tem dentro do pug. Condições como IF ELSE, FOR, EACH, declarações de variáveis. Tudo está disponível dentro do pug para você.

A partir do dia 20 será lançado 10 vídeos ensinando a usar não só o PUG mas diversas outras ferramentas que vão agilizar o seu processo de criação.