細節注意

  • 使用 Gulp 編譯,支援的監聽 : 目前支援 HTML、ejs、JavaScript、Images、SCSS 監聽並自動重新刷新。圖片新增時也會自動刷新。因此是不用使用 Live Sass Compiler 的 Watch SCSS 功能或是 Prepros 等工具來編譯 SCSS。

不需要開啟 Watch Sass 監聽

// 不需要開啟 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 的樣式與設計稿有差異,先用覆蓋方式進行。

資料來源

六角學院

最後修改日期: 12 月 28, 2020

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。