0%

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

發表於 分類於 Disqus：

這篇文章是我在開始工作前學習 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 ('路徑') %> 標籤。