這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 pug/jade 篇

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
接下來這一篇是一個番外篇，主要是給一些有在撰寫 pug/jade 習慣的人(包含我)，pug 是一個簡化 HTML 撰寫的一個 template，對於前端工程師來講，多瞭解一個切版語言是好的，畢竟可以少打一點字(?)

前言

接下來這一篇是一個番外篇，主要是給一些有在撰寫 pug/jade 習慣的人(包含我)，pug 是一個簡化 HTML 撰寫的一個 template，對於前端工程師來講，多瞭解一個切版語言是好的，畢竟可以少打一點字(?)，那這部分就不會上傳到 git repo 上，因為並不是每個人都會使用 pug/jade

pug/jade

要安裝 pug/jade 之前我們要先科普一下 pug 是什麼，首先前身是叫 jade 後來因為一些問題改名為 pug。

圖源網路

那使用 pug 有什麼好處呢?

  • 語法簡化
  • 可以模組化 HTML (當然這邊不會介紹怎麼寫 pug，只是安裝而已)
  • 提供一些程式運算

以我的作品其中一個 Sweetaste (甜點電商) 就是採用 pug 所開發，HTML 內容會像這樣子

pug

看起來很方便，但是其實也有缺點

  • 複製別人的 HTML 結構必須先做轉換
  • 縮排有時候會縮錯
  • 很嚴格

光第一點其實就很常搞死我，因為我個人常常是使用 Bootstrap 4 來開發，但是 Bootstrap 4 的範例都是純 HTML 結構，所以就變成我要先做一次轉換才可以貼進去 pug 中，所以各有取捨，但是可以瞭解一下，所以這邊最後也附上 pug 官方網站及轉換器。

pug 官方網站

HTML 轉 pug

pug 轉 HTML

起手式

首先我們要安裝套件，gulp 也有出 pug 專屬套件，所以只需要輸入以下語法就可以安裝哩

1
npm install --save gulp-pug

使用方式

使用方式也是非常簡單，一樣依照官方範例文件稍微修改即可

1
2
3
4
5
6
7
8
gulp.task('pug', () => {
  return gulp.src('./src/**/*.pug')
    .pipe($.pug({
        //若為false將會去除空格
        pretty: false
    }))
    .pipe(gulp.dest('./public/'))
});

接下來在 src 下新增 index2.pug

uploading...

內容輸入

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
    title Document
  body
    p 123

最後修改一下任務序列

default

沒問題後就可以輸入 gulp，來看看結果囉~

如果沒有意外你將會在 public 下看到一個 index2.html

index

並且瀏覽器上也可以看到我們剛剛輸入的 123

123