細節注意
- 使用 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 下載 )
留言