Cara Mudah Membuat Website dengan Pug
Zen

Zen @mzaini30

About: Mahasiswa Psikologi

Location:
Samarinda
Joined:
Mar 25, 2019

Cara Mudah Membuat Website dengan Pug

Publish Date: Mar 19
0 0

Untuk membuat website, satu-satunya bahasa markup yang resmi adalah HTML

Tapi, yang jadi masalah adalah HTML ini kodenya sangat panjang buat diketik, apalagi kalau diketik menggunakan HP

Contoh kode HTML versi minimal:

<!doctype html>
<html>
  <head>
    <title>Hello</title>
    <meta name="viewport" content="width=device-width, inisial-scale=1"/>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Ini adalah isinya</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Sangat panjang kan?

Nah, sekarang coba bandingkan dengan kode Pug berikut ini:

doctype html
html
  head
    title Hello
    meta(name="viewport" content="width=device-width, initial-scale=1")
  body
    h1 Hello World
    p Ini adalah isinya
Enter fullscreen mode Exit fullscreen mode

Apalagi lebih mantap kalau untuk styling-nya, pakai Stylus, dan untuk scripting-nya pakai CoffeeScript

Seperti contoh di bawah ini:

doctype html
html
  head
    title Hello
    meta(name="viewport" content="width=device-width, initial-scale=1")
    style
      :stylus
        h1
        p
          text-align center
  body
    h1 Hello World
    p Ini adalah isinya
    script
      :coffee
        nama = "Zen"
        alert "Hello #{nama}"
        angka = 2
        if angka % 2 is 0
          console.log "Angka #{angka} adalah bilangan genap"
        else
          console.log "Angka #{angka} bukan bilangan genap"
Enter fullscreen mode Exit fullscreen mode

Ternyata, membuat website dengan Pug itu lebih mudah, bahkan bisa kita kerjakan lewat hp

Pertanyaan sekarang adalah apakah bisa menampilkan website dengan kode Pug?

Tentu saja nggak bisa

Kita harus meng-convert-nya menjadi html terlebih dahulu

Perintahnya untuk convert adalah pug index.pug -o index.html

Tapi sebelumnya, pastikan dulu kita sudah menginstall Node JS

Setelah menginstall Node JS, kita bisa menginstall Pug dengan perintah:

npm i -g pug-cli
Enter fullscreen mode Exit fullscreen mode

Kalau kita juga ingin memasukkan CoffeeScript dan Stylus di kode-kode Pug kita, maka install-nya seperti ini:

npm i -g pug-cli jstransformer-coffee jstransformer-stylus
Enter fullscreen mode Exit fullscreen mode

Gimana?

Apakah kamu sudah tertarik untuk membuat website menggunakan Pug?

Jangan lupa juga join komunitas kita untuk dapat info terbaru terkait materi-materi seperti ini ya...

Comments 0 total

    Add comment