前言

此篇包含

Gulp 安裝實做步驟、圖示引用 ( Font AwesomeMaterial 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 就會執行監聽囉。

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 資料夾下載

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

#2-2 gulp 安裝

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

#2-3 版本號查詢

  • 須先安裝 node.js 與 gulp
    • 可執行指令做查詢 : node -vgulp -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

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

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

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

5 如何引用外部 SVG

  1. 如何製作 SVG 圖示

    • 可使用 AI ,畫布設定網頁要顯示的尺寸,並儲存 .svg 格式。
  2. 引用外部 SVG 圖示

    • img 標籤 ( 可做 RWD ),較常使用此方式引入。

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

      // 透過路徑的方式引用 svg 檔案。▲

    • 動態插入

      • 由繪圖軟體產生 : 把 AI 建立的 .svg 檔案丟到資料夾內,會呈現下方 <svg> 程式碼。
      • <svg> 標籤內的程式碼貼入 html 中 ( 圖 1 )。
      • .svg 檔也使用後端的方式載入,在 layout.ejs 使用 include 方式載入外部檔案 ( 圖 2 )

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

    // 圖1 ▲

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

    // 圖2 ▲

  3. 如何避免糟糕的 SVG 圖示

    • <img> 標籤或亂碼
      • 一般 VSCode 開啟 SVG 檔,都會是 <path><rect> 標籤, 不好的 SVG 檔裡面會插入 <img> 標籤表示 ( 如下圖 ) 或是亂碼,<img> 標籤內插入的其實是另外一張圖檔。
      • 向量檔是不會有尺寸限制,如果插入 <img> 標籤內含點陣圖就失去這個特性了。
    • 舊的 AI 如果圖形有模糊效果或是漸層色可能都會變成不好的 SVG。

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

  4. 在實做中會去畫 SVG ,都是使用數據做驅動,一般會使用 D3.js 框架。

  5. 改變 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 設定的問題

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

資料來源

六角學院 :

文章 :

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

作者