前言

之前都是透過 BS 提供的 CDN 下載檔案到專案中,這邊使用 NPM 套件管理工具來下載 BS 原始檔案到專案中,方便客製。
要使用 npm 就需先安裝 Node.js ,之後可使用相關指令
npm 為 node 的套件管理工具


Sass 環境與運行方法

CH12 114 115
課程練習下載
Bootstrap 路徑 : Getting started / Theming

  • 本章會介紹如何編譯自己的 BS 環境
  • 先於 課程練習 下載 Gulp 範例。 運行 Gulp 需先安裝 Node.js 環境

Bootstrap-gulp-資料夾介紹

Node.js 安裝與下載文件

安裝 Node.js 後開啟 VSCode 輸入指令

下方步驟可直接參考此篇輸入指令 從0開始客製 Bootstrap 專案

  • Ctrl + ` → 開啟終端機視窗 ( 反引號,數字 1 的左邊按鍵 )
  • node -v → 確認 Node.js 是否有被正確安裝。
  • npm install gulp -g → 會開始安裝 Gulp 相關環境 ( Windows ,每台電腦只須執行一次 )
    • 因為老師提供的 gulp 為 3.9.1 ,所以會使用以下指令執行 npm install gulp@3.9.1 -g
  • sudo npm install gulp -g → 會開始安裝 Gulp 相關環境 ( Mac ,每台電腦只須執行一次)
  • npm install → 等待安裝完後,就可到下個指令執行安裝 gulp ( 在目標資料夾下,每個專案只有第一次需要執行 )
  • gulp → 執行安裝 gulp ,安裝完後會開啟上方置入課程練習的網頁
  • Ctrl + C → 停止 gulp 工作。 剛剛上面開啟的網頁會停止顯示無法無法使用 ( = Web server 也會同時停住 )
    • 指令 gulp 再次打開網頁

VSCode 內 gulp 環境資料夾介紹

  • 資料夾 source : 檔案都在裡面
    • source / index.html 內的 all.css 就是我們編譯後的檔案。開啟頁面可看到上方的登入與註冊按鈕本是 primary 主題色藍色變為綠色,主要是因編譯後的變化。
    • 它是編譯的呢 ? 開啟 gulpfile.js 裡面 line40 可見它讀入 source/stylesheets 的 sass 與 scss ,也就是 souece/ stylesheets / all.scss ,它就會在 gulpfile.js 裡面 line43~line45 做編譯
    • souece/ stylesheets / all.scss 內。
      • @import "function" : 這個載入的 function 為 BS4 的。
      • @import "helpers/variables" : 為我們本地端的。 資料夾 source / stylesheets/helpers/_variables 。此 variables 是直接從 BS 官方文件中下方有個 _variables.scss 複製再修改成客製內容來的。
      • @import "bootstrap" : 這個載入的 bootstrap 為 BS4 的 。是連接到資料夾 node_modules / bootstrap /scss,資料夾 scss 內就變成我們的函式庫可在裡面自由調用裡面的元件。
  • 資料夾 public : 內為編譯後的檔案
  • 資料夾 node_modules : 用 npm 下載的資料夾。
  • 資料夾 .publisg : 直接部屬到 github 所使用的
  • 指令 gulp deploy → 會直接把我們的頁面部屬到 Github page 上。

Bootstrap-運行glup前後資料夾顯示狀態

| 注意事項 |

  • 原始檔案都在 source 資料夾內,盡可能不要在 public 資料夾內做調整。

資料來源

最後修改日期: 1 6 月, 2020

作者