Un pug c'est quoi ?

Un pug c'est ça !

Sinon c'est aussi un moteur de template !

A propos

Pug = Jade

Basé sur Haml

Pug permet aussi une syntaxe html propre, lisible, sensible aux espaces et à l'indentation

Principe : Pug permet d'écrire du html sans balises

Principes

doctype html
html(lang="en")
    head
        title hello pug
    body
        h1 hello world
        p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia rerum, libero repudiandae?

Un fichier .pug

Principes

Sa traduction en html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>hello jade</title>
  </head>
  <body>
    <h1>hello world</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia rerum, libero repudiandae?   </p>
  </body>
  </html>

Principes

Les attributs :

 #MyId C'est un Id
 .Classe C'est une classe
 input(type='checkbox', checked) 
 p Une checkbox
 form(#form action="action.php" method="post")
    input(type="text" name="name" id="name")
    button(type="submit") send

Principes

La traduction en html :

<div id="myId">ceci est un id</div>
<div class="class">ceci est une class</div>
<input type="checkbox" checked="checked"/>
<form #form="#form" action="action.php" method="post">
  <input type="text" name="name" id="name"/>
  <button type="submit">send    </button>
  </form>

Principes

Et ça marche aussi avec du javascript !

h2 loop for
  ul
    - for (var i = 0; i < 4; i++)
      li item #{i}  
 h2 loop each
    - list = ['bob', 'max', 'toto']
 each item in list
  li= item  
 h2 loop while
    - var n = 0;
    ul
     while n < 4
      li= n++

Principes

Ca donne ça en html :

<h2>loop for</h2>
<ul>
  <li>item 0</li>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  </ul>
<h2>loop each</h2>
<p>bob        </p>
<p>max        </p>
<p>toto       </p>
<h2>loop while</h2>
<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>

Templating

On créé tout d'abord un layout nommé base.pug

//- base.pug
html
  head
    title Peexaweb
    block styles
      link(rel="stylesheet" href='css/style.css')
  body
    block content
    block footer
      #footer
        p Copyright information

    block scripts
      script(src="js/jquery.min.js")

Templating

On créé une autre page qui reprendra base.pug

//- about.pug
extends base.pug

block content
  main
    h1 About Page
    p Another page created using pug template inheritance

Comment on l'installe ?

Pré-requis : Avoir Node.js installé

$ npm install pug

Puis

$ npm install pug-cli -g

1ère méthode

Utilisation

pug nomDuFichier.pug -P

On crée d'abord un fichier .pug

Puis on tape le code ci-dessous dans la console au même emplacement que le fichier .pug

Un fichier .html traduisant le fichier .pug sera créé au même endroit.

Bonus

Pug est compatible avec PHP, Laravel et plein d'autres languages !

Pour laravel : https://github.com/acidjazz/larpug

Pour PHP : https://github.com/pug-php/pug