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

前言

這一篇將會介紹如何加入 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