前言

此篇包含

Gulp 安裝實做步驟、圖示引用 ( Font Awesome、Material Icon )、如何引用外部 SVG、VSCode JASON 設定、VSCode 執行 gulp 出現問題解決方式。

Gulp 為前端任務工具，可把想要複用的工具，抽離出來自動化。
使用 gulp 搭配 EJS 編譯可先瀏覽六角學院提供的安裝文章 ‘ gulp 環境安裝流程 ‘ 。
- 可做專案的 layout 自動化整合監聽。
優點：EJS 編譯 layout 版型做修改時，其他頁面會一起同步，不會有遺漏掉的部分，~~然後被其他工程師電爆，說 code 管理的亂七八糟~~ ><。
專案完成後，通常都是把編譯出來的 dist 資料夾給後端或上傳 Github，其他部分皆為自己做自己的專案管理，所以不需要給別人。六角提供的資料夾中的 .gitignore 檔已經排除不需上傳的檔案們。

Gulp 環境安裝步驟 – 簡述

#01. 安裝好 Node.js 與 gulp

#02. 下載 web layout training gulp master 資料夾 :

自行修改資料夾名稱，丟至 VS Code，使用 VS Code 終端機執行下方指令。
記得重啟專案修改時，記得要重新輸入指令，網頁才會同步。

$ npm install  //安裝插件
$ gulp   //執行 gulp ，會產生一個 dist 資料夾與開啟網頁。

#03. 支援的監聽

Gulp 目前支援 HTML、ejs、JavaScript、Images、SCSS 監聽並自動重新刷新。圖片新增時也會自動刷新。因此是不用使用 Live Sass Compiler 的 Watch SCSS 功能或是 Prepros 等工具來編譯 SCSS，所以只要於終端機執行 gulp 就會執行監聽囉。

RWD 手機版網頁課堂筆記 - week4_01

// 不需要開啟 Watch Sass 監聽 ▲

#04. Others

都在 web layout training gulp master 資料夾內的 app 資料夾進行開發。
- app 資料夾：請再此資料夾開發（新增、修改 html css 都在此），這些檔案會編譯到 dist 資料夾內。
- dist 資料夾：app 資料夾內編譯後的檔案會到此資料夾內。上傳到 Github 或給後端都給此資料夾內的檔案即可。

Gulp 自動化整合 – 詳述

1. 資料夾內檔案解說 :

#1-1 app 資料夾

不要任意更改資料夾的名稱
統一在 app 資料夾開發（新增、修改 html css 都在此），這些檔案會編譯到 dist 資料夾內。
專案中的靜態資料 ( 圖片、js、css 等 ) 都放『 app 資料夾 / assets 』
建議專案都開一個 layout 版型，把每頁面會共用到的版型寫於此。如果有一個以上，可以再自行新增 layout2、layout3 等。
layout.ejs 內，除了 <title><%- title %></title> 、<%- contents %> 外，其他 html 檔案的資料會與此共用版合併在一起。日後維護如果已寫了很多頁面，要做 layout 修改，可於 layout.ejs 做修改即可，其他頁面皆會套用。

RWD 手機版網頁課堂筆記 - week4_02

// app 資料夾內的 layout.ejs 檔案 ▲

其他頁面（例如下示意圖的 index.html ）要做建置，直接從綠色框線內做撰寫。layout.ejs 內， <%- contents %> 就是綠色框線的程式碼。最終合併輸出 ( 編譯 ) 到 disk 資料夾的 index.html 內。

RWD 手機版網頁課堂筆記 - week4_03

// app 資料夾內的 index.html 檔案 ▲

1-2 package.json

管理運行 node.js 會使用到的相關套件

1-3 gulpfile.js

執行的腳本會放在此資料夾內。
- index.js : 主要角本，裡面把一個個腳本拆開來，執行時會依序運行它。
- envOptions.js : 環境變數，可看到你的 sass 檔案、ejs 檔案放哪，所有路徑都會在這邊。

1-4 其他

Gulp 是使用 node.js 做運行，所以會需要安裝一些套件。
一般來說在開發時會把開發的檔案與實際輸出的檔案分開。實際輸出的檔案 ( dist 資料夾內的檔案 ) 是可以透過編譯再產生的，所以不會被存在 git 的儲存庫裡，會透過 .gitignore 檔案把 dist 裡的檔案忽略掉。所以在 web-layout-training-gulp 此資料夾內是看不到 dist 資料夾的。
開發的檔案會放在 app 資料夾內，編譯後的檔案會在 dist 資料夾內。

2. 操作步驟

#2-1 資料夾下載

web-layout-training-gulp 資料夾中點選右方 Code 按鈕進行下載，並於 VS Code 中開啟。

RWD 手機版網頁課堂筆記 - week4_04

#2-2 gulp 安裝

gulp 安裝方式請看此篇教學文 – gulp 環境安裝流程。
建議可於 VS Code 開啟終端機，直接在裡面進行指令。

#2-3 版本號查詢

須先安裝 node.js 與 gulp
- 可執行指令做查詢 : node -v 與 gulp -v。
執行 gulp -v 查詢版本時出現
- CLI version : 為全域安裝可看到的版本
- Local version 為本地端的版本 ( 來自於此資料夾內的 package.json 檔案 )。所以如果路徑不在 gulp 編譯的資料夾上，Local version 是不會顯示版本號的，如圖二示意圖。

RWD 手機版網頁課堂筆記 - week4_05

// 圖一 ▲

#2-4 執行 gulp 開始運行環境

終端機輸入 gulp ，網頁就可運行成功。另外重啟專案修改時，記得要開啟終端機，輸入指令 gulp，才會再次進行同步。

RWD 手機版網頁課堂筆記 - week4_06

運行成功後可見專案內多了 app 與 dist 資料夾。
- 撰寫的原始檔會放置 app 資料夾內，請都在此開發。dist 資料夾內為編譯後的檔案，請不要在這邊開發。
- .ejs 為 node.js 的樣版語言。
Gulp 目前支援 HTML、ejs、JavaScript、Images、SCSS 監聽並自動重新刷新。圖片新增時也會自動刷新。因此是不用使用 Live Sass Compiler 的 Watch SCSS 功能或是 Prepros 等工具來編譯 SCSS，所以只要於終端機執行 gulp 就會執行監聽囉。

RWD 手機版網頁課堂筆記 - week4_07

// 不需要開啟 Watch Sass 監聽 ▲

2-5 載入 Bootstrap

使用 $ npm install bootstrap， BS 資料夾就會載入到 node_modules 資料夾中 ( 或下載此份資料夾 web-layout-training-gulp 內含 BS 不須 npm 下載 )
把要 @import 的 BS scss檔案放到路徑 app/assets/style : all.scss 中。BS 有提到客製也有一些必須要載入的 scss 檔案，可瀏覽 Bootstrap / Theming : Importing 部分，如下方的 //Required 。 ( 官方為使用 npm install )
複製 node_modules / bootstrap 中的 _variables.scss 到自己專案中進行客製 ( 路徑 : app\assets\style\utils )。
注意 @import 到 all.scss 的必要檔案，可參考 BS / Theming : Importing ，而當中的 _variables.scss 因為需客製所以換成自己專案的路徑。

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
//variable通常會客製所以會改成專案路徑
@import "utils/variables";  
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";
.
.
.
以此類推自行@import要載入的 scss

RWD 手機版網頁課堂筆記_variable

// _variable.scss 通常會進行客製，所以會改成自己的專案路徑。 ▲

2-6 新增第二頁 html 檔案？

以新增 location.html 為例

複製 index.html 檔案內—-- —-- 裡的程式碼，新增一個 location.html 檔案，貼入。更改上方示意圖的橘色框線部分的 title 部分。橘色框線部分的 title: 後方文字 → 為 layout.ejs 內的 <title><%- title %></title> 部分，可自行更換網頁標題。

---
title: 首頁
layout: ./app/layout.ejs
engine: ejs
current: index
---

預設執行 gulp 網頁會出現 index.html 的首頁頁面，如果要看別的頁面在網址後後方加入 xxx.html 就可瀏覽。( 終端機輸入 gulp 會執行監聽，所以不需要按 VScode 的 open with Live Server ，按了也是無法看的喔 ! )

#2-7 使用 ejs 樣版語言拆分小技巧

內容很長的話可以把部分檔案做拆分並在需要的 ejs 中載入，如下 :

開啟 app / layout.ejs 把 <head> 內程式碼剪下另外開啟新檔 head.ejs 貼上儲存。使用 <%- include('head.ejs') %>
- include 可把外部的檔案載進來

RWD 手機版網頁課堂筆記 - week4_08

另外 app / alyout.ejs 如果於

與

中間要另外再開一個 template ，可依上面方式，再另外新增 header.ejs 與 footer.ejs 檔案，分別依 <%- include ('{ ejs file path }') %> 方式載入。可參考 Gulp 編譯 – EJS layout 版型包含另一個 EJS layout 。

RWD 手機版網頁課堂筆記 - week4_09

// 原版 layout.ejs ▲ ( 圖一 )

RWD 手機版網頁課堂筆記 - week4_10

// 第二版 layout-product.ejs ，已拆分為兩個 ejs 檔案，引用進來 ▲ ( 圖二 )

3專案上傳 Github Pages 路徑出問題，解決方式

相對路徑方式 _ 推薦 :

使用 gulp 部屬要把專案上傳到 Github Pages ，建議把路徑改為相對路徑。
下圖中 https//xxxx/project/assets/style/all.css 中的 project 為專案名稱。

<!--檔案上傳 Github Pages 時建議把路徑改為相對路徑，顯示出來為下圖第1網址-->
<link rel="stylesheet" href="assets/style/all.css">

<!--有 / 斜線就為絕對路徑，顯示出來為下圖第2網址-->
<link rel="stylesheet" href="./assets/style/all.css">

RWD 手機版網頁課堂筆記 - week4_11

絕對路徑方式 – 不推:

絕對路徑的方式也使可以，但就必須要在路徑前方加入專案名稱。
網址就會變成 https//xxxx/project/assets/style/all.css 了。
不推薦的原因為如果另外開專案，路徑會跑掉

<link rel="stylesheet" href="/project/assets/style/all.css">

4 圖示的引用技巧

01. Font Awesome

CDN : https://cdnjs.com/libraries/font-awesome
- 載入 CSS 或 JS 運用上沒甚麼差異，但搭配框架 ( 例如 VUE ) 時， CSS 版本會比較穩定。
- JS 插入時，它會動態的把你的動元素替換成 svg， CSS 會插入一個字體。

02. Material Icon

雖然和 Font Awesome 一樣是使用字體方式呈現，但使用方式完全不同。
使用文件 : https://google.github.io/material-design-icons/
icon 連結 : https://material.io/resources/icons/?style=baseline
優點 : 是使用連字技巧 ( 可被搜尋、辨識 )，圖片可被辨識，在網頁中使用 ctrl + F 是可搜尋到的，下方圖示中搜尋 watch 是可找到此 icon。也因為是使用連字技巧轉成圖案，所以不要自行更改 span 中的文字，icon 會不能顯示。

<span class="material-icons">
watch_later
</span>

RWD 手機版網頁課堂筆記 - week4_12

5 如何引用外部 SVG

如何製作 SVG 圖示
- 可使用 AI ，畫布設定網頁要顯示的尺寸，並儲存 .svg 格式。
引用外部 SVG 圖示
- img 標籤 ( 可做 RWD )，較常使用此方式引入。
  
  // 透過路徑的方式引用 svg 檔案。▲
- 動態插入
  - 由繪圖軟體產生 : 把 AI 建立的 .svg 檔案丟到資料夾內，會呈現下方 <svg> 程式碼。
  - 把 <svg> 標籤內的程式碼貼入 html 中 ( 圖 1 )。
  - .svg 檔也使用後端的方式載入，在 layout.ejs 使用 include 方式載入外部檔案 ( 圖 2 )
// 圖1 ▲

// 圖2 ▲
如何避免糟糕的 SVG 圖示
- <img> 標籤或亂碼
  - 一般 VSCode 開啟 SVG 檔，都會是 <path> 、<rect> 標籤，不好的 SVG 檔裡面會插入 <img> 標籤表示 ( 如下圖 ) 或是亂碼，<img> 標籤內插入的其實是另外一張圖檔。
  - 向量檔是不會有尺寸限制，如果插入 <img> 標籤內含點陣圖就失去這個特性了。
- 舊的 AI 如果圖形有模糊效果或是漸層色可能都會變成不好的 SVG。
在實做中會去畫 SVG ，都是使用數據做驅動，一般會使用 D3.js 框架。
改變 SVG 樣式，屬性和一般的 CSS 寫法不同，可參考卡斯伯老師的 – SVG 簡介

VSCode JSON 設定

VS Code 檔案 / 喜好設定 : 設定，右上方開啟設定 ( JSON )

RWD 手機版網頁課堂筆記 - week4_17

// 最後測試後可以使用此版本即可 ▲

{
    //css產出設定
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed", //壓縮成一行css
            "extensionName": ".min.css",  //副檔名為 .min.css
            "savePath": "/dist/style" //此為輸出的路徑，可以自行更改
        },
        {
            "format": "expanded", 
            "extensionName": ".css", //正式版副檔名為 .css            
            "savePath": "/css"
        }
    ],
    "editor.wordWrap": "on",
}

設計稿建議使用 HTML5 結構

<nav class="nav">...</nav> <!--導覽列-->

<header class="header">...</header>  <!--例如背景圖-->
<main> 
   <section class="container">h2 h3</section>
        ...
</main>
<footer class="footer">...</footer>

實做問題區

Q1. VSCode 執行 glup 出現問題

同學於 vscode 執行 glp 出現下方問題 :

主要是 PowerShell 設定的問題

解決方式 : PowerShell 更改執行原則，解決無法執行 ps1 指令稿問題。

RWD%20%E6%89%8B%E6%A9%9F%E7%89%88%E7%B6%B2%E9%A0%81%E8%AA%B2%E5%A0%82%E7%AD%86%E8%A8%98%20-%20week4%20176435b413aa4ff48a8c4600a114e389/vscode_glup.png

Week 4 作業

GitHub Repository

GitHub Pages

資料來源

六角學院：

網頁切版直播班-2020秋季
第四週 – 設計稿 ( 圖片空間 week4 資料夾 )
**web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout )**
- web-layout-training-gulp ( 內含 BS 不須 npm 下載 )
gulp 環境安裝流程
Gulp 流程操作說明影片
卡斯伯老師的 – SVG 簡介
D3.js

文章 :

瀏覽器強制跳轉 HTTPS 網址怎麼辦 ?
CSS 網頁字型 @font-face 使用教學與範例
CSS設定中英文不同的字體
Day14：小事之 HTML 語意化標籤上篇
- <header>、<nav>、<main>、<section>、<article>、<aside>、<figure>、<footer>
How TO – Custom Checkbox

多頁式網頁設計課堂筆記 -4

前言

此篇包含

Gulp 環境安裝步驟 – 簡述

#01. 安裝好 Node.js 與 gulp

#02. 下載 web layout training gulp master 資料夾 :

#03. 支援的監聽

#04. Others

Gulp 自動化整合 – 詳述

1. 資料夾內檔案解說 :

#1-1 app 資料夾

1-2 package.json

1-3 gulpfile.js

1-4 其他

2. 操作步驟

#2-1 資料夾下載

#2-2 gulp 安裝

#2-3 版本號查詢

#2-4 執行 gulp 開始運行環境

2-5 載入 Bootstrap

2-6 新增第二頁 html 檔案？

#2-7 使用 ejs 樣版語言拆分小技巧

3專案上傳 Github Pages 路徑出問題，解決方式

4 圖示的引用技巧

01. Font Awesome

02. Material Icon

5 如何引用外部 SVG

VSCode JSON 設定

設計稿建議使用 HTML5 結構

實做問題區

Q1. VSCode 執行 glup 出現問題

Week 4 作業

資料來源

作者

留言

撰寫回覆或留言取消回覆

多頁式網頁設計課堂筆記 -4

前言

此篇包含

Gulp 環境安裝步驟 – 簡述

#01. 安裝好 Node.js 與 gulp

#02. 下載 web layout training gulp master 資料夾 :

#03. 支援的監聽

#04. Others

Gulp 自動化整合 – 詳述

1. 資料夾內檔案解說 :

#1-1 app 資料夾

1-2 package.json

1-3 gulpfile.js

1-4 其他

2. 操作步驟

#2-1 資料夾下載

#2-2 gulp 安裝

#2-3 版本號查詢

#2-4 執行 gulp 開始運行環境

2-5 載入 Bootstrap

2-6 新增第二頁 html 檔案 ？

#2-7 使用 ejs 樣版語言拆分小技巧

3專案上傳 Github Pages 路徑出問題，解決方式

4 圖示的引用技巧

01. Font Awesome

02. Material Icon

5 如何引用外部 SVG

VSCode JSON 設定

設計稿建議使用 HTML5 結構

實做問題區

Q1. VSCode 執行 glup 出現問題

Week 4 作業

資料來源

作者

留言

撰寫回覆或留言 取消回覆

2-6 新增第二頁 html 檔案？

撰寫回覆或留言取消回覆