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.
Pug JS Aprenda muito mais sobre como essa ferramenta pode impulsionar seus projetos.
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
+pet('cat') // Chamando mixin e passando 'cat' como parâmetro
+pet('dog') // Chamando mixin e passando 'dog' como parâmetro
+pet('pig') // Chamando mixin e passando 'pig' como parâmetro
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ê.
Se você quer realmente aprender como utilizar essa ferramenta fique ligado nessa playlist do youtube aqui.
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.
Assine nosso feed de notícias para ter atualizações direto no seu e-mail
[newsletter]