這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇:加入 ejs 篇
前言
這一篇將會介紹如何加入 ejs,相信寫過 node.js exporess 的人都會用過 ejs,很多人也會建議初學 ejs,所以這一篇也與 pug 篇一樣,不會上傳到 GitHub repo,因為並不是每一個人都會使用這些 template
EJS
在這邊一樣要科普一下 EJS 是什麼
EJS 是由 JavaScript 生成的 HTML Template,而它的好處有那些呢?
- 與原生 HTML 相近
- 可以使用變數、迴圈等
- 模組化 HTML
那缺點呢?
- 原生 HTML 要寫的很多
- EJS 變數引入方式撰寫有點麻煩 (
<%= %>
)
所以使用 EJS 如果直接複製網路上的 HTML 範例是可以直接使用的,通常會建議新手學習 EJS 而不是 pug,因為 pug 的學習曲線是稍微比較高的。
起手式
廢話一樣不多說先安裝套件再說
1 | npm install --save gulp-ejs |
使用方式
使用方式一樣可以參考範例文件來稍作修改
1 | gulp.task('ejs', () => { |
任務序列也要稍微修改
接下來新增一個 index2.ejs,結構基本上與 HTML 是一樣的,但是這邊會多寫一個東西
1 |
|
然後輸入 gulp
,這時候會發生一件奇怪的事情,它直接編譯出 .ejs
而不是 .html
,但是內容是正確的
所以這邊還要再裝一個套件來處理這個問題,也就是 gulp-rename
1 | npm install --save gulp-rename |
安裝完畢之後再將原本的 ejs task 修改為以下
1 | gulp.task('ejs', () => { |
然後再執行一次 gulp
,這時候就可以看到 index2.ejs 正常編譯成 index.html 了