細節注意
- 使用 Gulp 編譯，支援的監聽 : 目前支援 HTML、ejs、JavaScript、Images、SCSS 監聽並自動重新刷新。圖片新增時也會自動刷新。因此是不用使用
Live Sass Compiler的Watch SCSS功能或是Prepros等工具來編譯 SCSS。
// 不需要開啟 Watch Sass 監聽 ▲
- 一個網頁會有一個 h1 標籤。
<img>rest 可使用 BS 的.img-fluid。- 外層架構
.container-fluid><nav>><main>
使用六角學院提供的 web layout training gulp 資料夾編譯 :
-
index.ejs
<head>部分另外新增 head.ejs ，使用<%- include ('head.ejs') %>引入 index.ejs 的<head>內。除了 Boostrap CSS 與 Boostrap JavaScript 需要掛 CDN 之外，本身已經內建打包 jQuery 3.5.1。- 設計稿中
<nav>區域一樣，可複用寫於此。
-
gulp 編譯有問題可到 web layout training gulp 資料夾 中的 readme.md 觀看。
-
老師之後會教進階用法，這邊如果 BS 的樣式與設計稿有差異，先用覆蓋方式進行。
資料來源
六角學院
- 網頁切版直播班-2020秋季
- 第五週 – 設計稿 ( 圖片空間 week5 資料夾 )
- emmet 熱鍵中文表、VS Code 編輯器熱鍵。
- **web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout )**
- web-layout-training-gulp ( 內含 BS 不須 npm 下載 )