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

發表於 更新於 分類於

Google AD

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

Liker 讚賞

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

這一篇將會介紹如何加入 ejs，相信寫過 node.js exporess 的人都會用過 ejs，很多人也會建議初學 ejs，所以這一篇也與 pug 篇一樣，不會上傳到 GitHub repo，因為並不是每一個人都會使用這些 template

前言

這一篇將會介紹如何加入 ejs，相信寫過 node.js exporess 的人都會用過 ejs，很多人也會建議初學 ejs，所以這一篇也與 pug 篇一樣，不會上傳到 GitHub repo，因為並不是每一個人都會使用這些 template

EJS

在這邊一樣要科普一下 EJS 是什麼

Image

EJS 是由 JavaScript 生成的 HTML Template，而它的好處有那些呢?

  • 與原生 HTML 相近
  • 可以使用變數、迴圈等
  • 模組化 HTML

那缺點呢?

  • 原生 HTML 要寫的很多
  • EJS 變數引入方式撰寫有點麻煩 (<%= %>)

所以使用 EJS 如果直接複製網路上的 HTML 範例是可以直接使用的，通常會建議新手學習 EJS 而不是 pug，因為 pug 的學習曲線是稍微比較高的。

起手式

廢話一樣不多說先安裝套件再說

1
npm install --save gulp-ejs

使用方式

使用方式一樣可以參考範例文件來稍作修改

1
2
3
4
5
6
7
gulp.task('ejs', () => {
  return gulp.src('./src/**/*.ejs')
    .pipe($.ejs({
        msg: "Hello Gulp!"
    }))
    .pipe(gulp.dest('./public/'))
});

任務序列也要稍微修改

default

接下來新增一個 index2.ejs，結構基本上與 HTML 是一樣的，但是這邊會多寫一個東西

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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</title>
</head>
<body>
  <p>1234</p>
  <%= msg %>
</body>
</html>

然後輸入 gulp，這時候會發生一件奇怪的事情，它直接編譯出 .ejs 而不是 .html，但是內容是正確的

ejs

所以這邊還要再裝一個套件來處理這個問題，也就是 gulp-rename

1
npm install --save gulp-rename

安裝完畢之後再將原本的 ejs task 修改為以下

1
2
3
4
5
6
7
8
gulp.task('ejs', () => {
  return gulp.src('./src/**/*.ejs')
    .pipe($.ejs({
        msg: "Hello Gulp!"
    }))
    .pipe($.rename({ extname: '.html' }))
    .pipe(gulp.dest('./public/'))
});

然後再執行一次 gulp，這時候就可以看到 index2.ejs 正常編譯成 index.html 了

gulp