CODEWITHSUNDEEP
node.jswebpug
Shree
Shree

Reputation: 303

How to install and use Jade

Recently I was watching some video tutorials on youtube and came across this JADE thing, how do I install and use it for my web development?

I googled it around but didn't find a proper site that teaches step-by-step to proceed with. And the site jade-lang.com is not available. I did this from websites but node.js is throwing some errors. screenshot below:

enter image description here

Upvotes: 2

Views: 3379

Answers (2)

Eng_Farghly
Eng_Farghly

Reputation: 2997

first jade is deprecated and new name for jade is pug for more information about this check this link

pug documentation

second to install pug write this command npm install pug -g after you install pug create a new folder to your project and create a file inside your project file.pug and right click on your folder project + shift and open command window here and write this command pug file.pug after you write this command it will generate a new file file.html

Third write this command pug input.pug input.html --watch --pretty

--watch to compile your code after saving in file.pug

--pretty to write a code with format of html(organized code) not minimized code

to write a tag in pug write the name of tag like

  • html tag and we will compile to <html></html>

  • a(href='#' target='_blank') link compile to <a href="#" target="_blank">link</a>

  • a(href='#' target=''): img(src='' alt='') compile to <a href="#" target=""><img src="" alt=""/></a>
  • to write a comment // this is a comment compile to <!-- this is a comment -->
  • to write class name and content for tag for example p.demo this is a paragraph compile to <p class="demo"> this is a paragraph</p>
  • to write id and content for tag for example p#demo this is a paragraph compile to <p id="demo"> this is a paragraph</p>

  • to write a function

    mixin list ul li foo li bar li baz

to use this function write the name of function +list and will compile to 

<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
  </ul>

to include file write include file_name

Finally this is a example for pug code

html 
    head
        title Hello
        link(href='' rel='stylesheet' type='text/css')
    body

        //this is a comment
        p.item hello
        p#item

        br/

        a(href='#' target=''): img(src='' alt='') 
        // to start a new line
        |
        |
        a(href='google.com') Google
         // write a function
         mixin list
          ul
            li foo
            li bar
            li baz
        // use function
        +list
        // include file
        include content

For more information about pug check this link pug full documentation

Upvotes: 2

sidewinder
sidewinder

Reputation: 682

Jade is now called "pug".

npm install pug -g

Here you will find how to use it if you scroll down:

https://www.npmjs.com/package/pug

Upvotes: 1

Related Questions