自我成長

六角學院切版直播班2020秋季Week4

By Jiang 13 November 2020
六角學院切版直播班2020秋季Week4

這週的直播學習開始導入Gulp自動化流程和SCSS系統，看似很容易，但在一開始安裝時就頻頻卡關，好險有老師與助教寫的手冊，暫時解決卡關的問題，mac很多時候都要加sudo，又學會一招了，週二助教開的直播加碼，老實說開始有點聽不太懂，有點消化不良，下班回家又重新看了一遍和聽一遍，觀念還是覺得很模糊，本來第四週要開始用Gulp和SCSS寫看看，結果不知從何下手，而且時間上的不允許，沒辦法再打掉重練了，大概是因為前面基礎都還沒打穩健吧，決定要重看影片再來試試看，這週就先把第三第四週寫個兩頁RWD了，Gulp和SCSS持續研究中～

第四週 - 多頁式網頁設計

本週訓練菜單

課程重點

  1. 多頁式開發 Layout 設計 (老師範例)
  2. Gulp JS
  3. SCSS
  4. 如何與後端協作網頁版型
  5. 藉由 Gulp 撰寫樣板語言 (template language)

本週常見遇到的問題 (本週slack筆記)

Q：GitHub Pages沒有master branch 選項，只有main ?

GitHub計畫從10月1日起，所有新建的儲存庫都會以main為預設branch命名，不再使用master，這項變更並不會影響現有儲存庫的名稱，開發人員也可以選擇不要變更 資料參考來源

結論：目前的main = 以前的master

Q：sudo npm i gulp@4 -g 安裝之後出現 location version： unknown 這是正常的嗎 ?

location version： unknown 是因為還沒在專案資料夾安裝本地的gulp。但是global的已經裝好囉。

結論：正常的！

Q：使用gulp的目的 ?

直播影片老師有提到，web-layout-training-gulp-master 這整個資料夾，是老師為了讓大家體驗template模板的快速開發，請ray助教寫好gulp資料夾。

新專案只需要把檔案「拆解」放進APP資料夾，並利用assets存放其他的images、js、styleCSS等等資料。

上述資料就緒後，gulpfile.js資料夾裡的程式會將APP資料夾編譯，編譯結果就是dist資料夾的內容。

拆解方式，影片多複習

新專案建立，把網頁拆解&存放進app裡面，共同區塊(稱template模板)放入layout.ejs，ex: header、footer。

內容content，則做成html，ex: index.html、product.html

Q：目前的gulp作法有辦法讓一個ejs layout包含另一個layout嗎？

可以但是要都用 ejs 寫， 然後使用這個語法引入 <%- include ('{ ejs file path }') %>

Layout 觀念設計

  1. ID 與錨點設計

    • “#“錨點使用方式
    • 錨點移動時畫面沒有重新整理
    • 回上一頁不會回到首頁
    • 錨點只能有一個ID
    • CTA call to action ex.導購的區塊
    • page.html#title 指定到對應位置去

  2. 什麼是 Layout ？

    • 共通的樣板 layout
    • 每頁都會出現的
    • 呼叫某頁去和樣板做配合
    • 表頭header 表尾footer

  3. EJS 樣板語言介紹

    • layout.html
    • index.html
    • page.html
    • ejs(用在node.js)
    • layout.ejs 樣板 可能有兩三個 ex有滿版或沒滿版
    • 提交作業時 githubpages dist/index.html

  4. Gulp 整合 (講師備註：iterm2重啟 sass rebuild)

    • 記住Gulp 指令

      gulp -v 查看版本 cd 進入資料夾 把gulp資料夾拉進終端機 sudo npm install gulp

    • 關注 app & dist 資料夾就好了
    • app編譯Gulp任務工作 »>dist
    • 在app資料夾寫code
    • 丟上gihubpages是丟上dist資料夾
    • app>assets>style scss
    • dist>assets>style>all.css

  5. cacoo 畫圖 app 跟 dist 的差異

兩種規劃管理

  1. 多一頁靜態的 layout.html 管理
  2. EJS Gulp 整合，影音教學

如何與後端協作

  1. 註解補上樣板語言的 layout 處
  2. 藉由註解提供狀態切換
  3. 須留意重複顯示的區塊

SCSS 教學

  • 簡報
  • 環境教學 (Live Sass(工作區)、Gulp)
    • Live Sass Compiler 文件教學
    • scss撰寫時具有階層概念
    • SCSS可完全當作CSS來寫
    • 如果CSS後面沒加分號「;」會編譯錯誤
    • 如果有編譯錯誤，錯誤訊息會顯示在編譯出的CSS
    • 多利用巢狀寫法(Nesting)
    • CSS巢狀不要超過四層
  • 變數設計
    • 相同地方的設定
    • 變數先設定在最上面的地方宣告 $自訂名稱
    • $black:#000; .footer{color:$black;}
    • 顏色可以設定100-700數值
    • 主色primary
    • 輔助色secondary
    • $font-s $font-m $font-l
  • import 檔案切分
    • @import(匯入)
    • @import_variable.scss
    • @import_reset.scss
    • @import_main.scss
    • 變數不會跑進css，單純拿來編譯的語言
    • reset沒有變數,就不會有影響
  • import 拆分規劃
@import "variable";
@import "reset";
@import "layout";

1.變數的檔案放在最前面，這樣一來後面的檔案才能夠引用變數的css內容。
2.reset的檔案放在layout前面，才不會導致選擇器的css內容被reset覆蓋。

SCSS 影音教學補充

gulp 基礎介紹

學習方向

  1. 不想用 EJS，只單純想用 SCSS，請用 Live Sass Compiler
    • 將SCSS檔案，開啟到VSCode中，再按下方的Watch Sass，立即就會將SCSS轉存成CSS，並儲存在原路徑底下，當編寫任何的SCSS，只需按下儲存，CSS文件也會同步更新
  2. 想用 EJS 與 SCSS，請看此影音教學

Live Sass Complier

加入下列程式碼時，最外層大括號拿掉再放進去，中括號最後面加上逗號 “,” 和後面原本在裡面的的程式碼做區隔

{
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/css/"
        }
    ]
}

SCSS 結構參考

一個頁面一個scss

@import "variable";// 變數  
@import "reset";  // reset.css  
@import "layout"; // 共同框架,第一層
@import "index";     
@import "page1";

老師範例

第四週主線任務

作業等級表

    1. LV2：任選二頁需含RWD

第四週每日任務

  • 11/09 錨點練習
  • 11/10 @import 引入練習
  • 11/11 SCSS nesting 巢狀結構
  • 11/12 mixin 搭配 include
  • 11/13 使用「＆」

第四週小組任務

任務一：請組員們彼此間確認 Gulp 環境是否都有安裝成功，並成功能看到範例七截圖，若有環境安裝問題，還請組員們彼此透過 ZOOM 分享螢幕協助排錯

任務二：請試著找出以下網站，哪些區塊是屬於 Layout 環節，找出三個網站並回報截圖

comments powered by Disqus