前言
此篇包含
Gulp 安裝實做步驟、圖示引用 ( Font Awesome、Material Icon )、如何引用外部 SVG、VSCode JASON 設定、VSCode 執行 gulp 出現問題解決方式。
- Gulp 為前端任務工具,可把想要複用的工具,抽離出來自動化。
- 使用 gulp 搭配 EJS 編譯可先瀏覽六角學院提供的安裝文章 ‘ gulp 環境安裝流程 ‘ 。
- 可做專案的 layout 自動化整合監聽。
- 優點 :EJS 編譯 layout 版型做修改時,其他頁面會一起同步,不會有遺漏掉的部分,
然後被其他工程師電爆,說 code 管理的亂七八糟><。 - 專案完成後,通常都是把編譯出來的 dist 資料夾給後端或上傳 Github,其他部分皆為自己做自己的專案管理,所以不需要給別人。六角提供的 資料夾中的 .gitignore 檔已經排除不需上傳的檔案們。
Gulp 環境安裝步驟 – 簡述
🗒️ 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 就會執行監聽囉。
// 不需要開啟 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 做修改即可,其他頁面皆會套用。
// app 資料夾內的 layout.ejs 檔案 ▲
- 其他頁面 ( 例如下示意圖的 index.html )要做建置,直接從綠色框線內做撰寫。layout.ejs 內,
<%- contents %>
就是綠色框線的程式碼。最終合併輸出 ( 編譯 ) 到 disk 資料夾的 index.html 內。
// 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 中開啟。
#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 是不會顯示版本號的 ,如圖二示意圖。
// 圖一 ▲
#2-4 執行 gulp 開始運行環境
- 終端機輸入
gulp
,網頁就可運行成功。另外重啟專案修改時,記得要開啟終端機,輸入指令 gulp,才會再次進行同步。
- 運行成功後可見專案內多了 app 與 dist 資料夾。
- 撰寫的原始檔會放置 app 資料夾內,請都在此開發。dist 資料夾內為編譯後的檔案,請不要在這邊開發。
- .ejs 為 node.js 的樣版語言。
- Gulp 目前支援 HTML、ejs、JavaScript、Images、SCSS 監聽並自動重新刷新。圖片新增時也會自動刷新。因此是不用使用
Live Sass Compiler
的Watch SCSS
功能或是Prepros
等工具來編譯 SCSS,所以只要於終端機執行 gulp 就會執行監聽囉。
// 不需要開啟 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
// _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 可把外部的檔案載進來
- 另外 app / alyout.ejs 如果於
與
// 原版 layout.ejs ▲ ( 圖一 )
// 第二版 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">
絕對路徑方式 – 不推:
- 絕對路徑的方式也使可以,但就必須要在路徑前方加入專案名稱。
- 網址就會變成
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>
5 如何引用外部 SVG
-
如何製作 SVG 圖示
- 可使用 AI ,畫布設定網頁要顯示的尺寸,並儲存 .svg 格式。
-
引用外部 SVG 圖示
-
img 標籤 ( 可做 RWD ),較常使用此方式引入。
// 透過路徑的方式引用 svg 檔案。▲
-
動態插入
- 由繪圖軟體產生 : 把 AI 建立的 .svg 檔案丟到資料夾內,會呈現下方
<svg>
程式碼。 - 把
<svg>
標籤內的程式碼貼入 html 中 ( 圖 1 )。 - .svg 檔也使用後端的方式載入,在 layout.ejs 使用 include 方式載入外部檔案 ( 圖 2 )
- 由繪圖軟體產生 : 把 AI 建立的 .svg 檔案丟到資料夾內,會呈現下方
// 圖1 ▲
// 圖2 ▲
-
-
如何避免糟糕的 SVG 圖示
<img>
標籤或亂碼- 一般 VSCode 開啟 SVG 檔,都會是
<path>
、<rect>
標籤, 不好的 SVG 檔裡面會插入<img>
標籤表示 ( 如下圖 ) 或是亂碼,<img>
標籤內插入的其實是另外一張圖檔。 - 向量檔是不會有尺寸限制,如果插入
<img>
標籤內含點陣圖就失去這個特性了。
- 一般 VSCode 開啟 SVG 檔,都會是
- 舊的 AI 如果圖形有模糊效果或是漸層色可能都會變成不好的 SVG。
-
在實做中會去畫 SVG ,都是使用數據做驅動,一般會使用 D3.js 框架。
-
改變 SVG 樣式,屬性和一般的 CSS 寫法不同,可參考卡斯伯老師的 – SVG 簡介
VSCode JSON 設定
- VS Code 檔案 / 喜好設定 : 設定 ,右上方 開啟設定 ( JSON )
// 最後測試後可以使用此版本即可 ▲
{
//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 設定的問題
Week 4 作業
資料來源
六角學院 :
- 網頁切版直播班-2020秋季
- 第四週 – 設計稿 ( 圖片空間 week4 資料夾 )
- **web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout )**
- web-layout-training-gulp ( 內含 BS 不須 npm 下載 )
- gulp 環境安裝流程
- Gulp 流程操作說明影片
- 卡斯伯老師的 – SVG 簡介
- D3.js
文章 :
-
<header>
、<nav>
、<main>
、<section>
、<article>
、<aside>
、<figure>
、<footer>
留言