0%

[Gulp] 在 Gulp 專案中引入 EJS template

這篇文章是我在開始工作前學習 Gulp 與 EJS 時的筆記,現在的公司雖然不是用 Gulp 也不是用 EJS,而是採用一個電商後台服務 Shopify 自創的模板語言(liquid),但因為同為模板語言,因此讓我想起曾寫過這篇跟 EJS 有關的筆記,所以就拿來發鐵人賽啦~

如何在 Gulp 專案中安裝 EJS 可以參考這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇:加入 ejs 篇

以下內容關於是如何在專案中撰寫 EJS。

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// ejs block
function ejs() {
return gulp.src(['./src/templates/**.ejs', '!./src/templates/**/_*.ejs'])
.pipe($.ejs({
msg: 'Hello Gulp!',
}))
.pipe($.rename({ extname: '.html' }))
.pipe($.if(options.env === 'prod', $.htmlmin({ collapseWhitespace: true })))
.pipe(gulp.dest('./public/'))
.pipe(browserSync.stream());
}

// watch files
gulp.task('watch', gulp.parallel('browser-sync', () => {
// 改第一行
gulp.watch('./src/templates/**/*.ejs', gulp.series('ejs'));
gulp.watch('./src/sass/**/*.scss', gulp.series('scss'));
gulp.watch('./src/js/**/*.js', gulp.series('babel'));
}));

如果有需要載入其他套件的 js 檔,需要再寫一個段落來整合。

1
2
3
4
5
6
7
8
9
10
function vendorsJs() {
return gulp.src([
'./node_modules/jquery/dist/**/jquery.min.js',
'./node_modules/popper.js/dist/umd/**/popper.min.js',
'./node_modules/bootstrap/dist/js/**/bootstrap.bundle.min.js',
'./node_modules/wowjs/dist/wow.min.js',
])
.pipe($.concat('vendors.js'))
.pipe(gulp.dest('./public/javascript'));
}

專案資料夾結構

1
2
3
4
5
src/
|-- templates/
|-- index/
|-- layout/
|-- index.ejs
  • index 資料夾:各區塊的 .ejs 檔,每個檔裡面的內容都是用 HTML 標籤撰寫的,且每個檔名開頭都是 _,例如 _footer.ejs
  • layout 資料夾:放一些共用的內容,例如 <head> 中的資訊、所有要載入的 CDN <script> 等。
  • index.ejs:把以上兩個資料夾中所有 .ejs 排成一個完整的網頁。

index.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">

<head>
<%- include ('./layout/_head.ejs') %>
</head>

<body>
<!-- header & solvable -->
<%- include ('./layout/_header.ejs') %>
<!-- capable -->
<%- include ('./index/_capable.ejs') %>
<!-- formula -->
<%- include ('./index/_formula.ejs') %>
<!-- footer -->
<%- include ('./index/_footer.ejs') %>
<!-- script -->
<%- include ('./layout/_script.ejs') %>
</body>

</html>

引入其他的 .ejs 檔,要用 <%- include ('路徑') %> 標籤。