從0開始客製 Bootstrap 專案

前言

自我統整篇,請閱讀前保有存疑與驗證之心 XD


簡易流程

  1. 新增專案資料夾
  2. 複製 gulp-demo 內兩個檔案 : gulpfile.js 與 package.json 丟入要客製的專案中
  3. 執行指令
$ npm install gulp@3.9.1 -g
$ npm install
$ gulp

安裝

|| MAC

  • 如果已使用手動安裝 Node.js ,先跟隨此篇文章做刪除動作
  • 跟著 OneJar 教學 Mac 版 ,安裝 NVM ,透過 NVM 安裝 Node.js 並可切換 Node.js 版本。另外 OneJar 指出官方文件不建議使用 Homebrew 做安裝

|| Windows

  • 到 " 解除安裝或變更程式 " ,做 " 解除安裝 " 動作
  • 跟著 OneJar 教學 Windows 版,安裝 NVM ,透過 NVM 安裝 Node.js 並可切換 Node.js 版本

執行

STEP 01

新增專案資料夾,專案結構 :

your-project/
└── source
   ├── stylesheets
   │   ├── all.scss
   └── index.html

STEP 02

到卡斯伯老師的 Github – gulp-demo 下載壓縮檔,並取出其中兩個檔案 : gulpfile.js 與 package.json 丟入要客製的專案中,結構 :

your-project/
└── source
   ├── stylesheets
   │   ├── all.scss
   └── index.html
└── gulpfile.js
└── package.json
  • gulp 主要是執行 gulpfile.js 中的任務,所以如果沒建立 gulpfile.js 執行 gulp 時就無法編譯出 public 資料夾。
  • package.json 內可見 gulp 與 bootstrap 版本號。另外想知道專案有使用什麼套件,我們可以從裡面的 dependencies 這個欄位知道,下圖顯示安裝 bootstrap 套件。
  • 要注意 gulp 與 node.js 安裝的版本號不可以比 package.json 版本號高。之前就是因為安裝版本號太高一直出現 Error

package.json中gulp與bootstrap 版本號

STEP 03

專案丟入 VSCode ,開始執行下方指令

# 如果之前有安裝版本太高的 gulp 先刪除全域 gulp。沒有就略過
$ npm uninstall gulp -g

# 這邊因為老師提供的gulp 是 @3.9.1,所以另外再加版本號上去
$ npm install gulp@3.9.1 -g

# 確認 gulp 版本
$ gulp -v

# 下載 bootstrap 官方套件下來
$ npm install

# 運行 gulp 編譯出 public 資料夾,網頁開啟
$ gulp
  • $ npm install 下載下來的套件都會在 node_modules 資料夾內
  • $ gulp ,運行 gulp 會編譯出 public 資料夾。

專案中資料夾釐清

  • source 資料夾:需要改動的程式碼都在此做修改。
    • 加入 css link : <link rel="stylesheet" href="stylesheets/all.css"> 丟至 <head> 內。( 原路徑 : public / stylesheets / all.css )
    • 把 Bootstrap 元件或內容丟入,測試是否成功,請看此篇
    • 加入 js link : <script src="/javascripts/vendor.js"></script> 丟至 </body> 前 ( 原路徑 : public / javascripts : vendor.js )
      • 如果 JS 不想寫在 HTML 中,另外於新增資料夾 source / javascripts : all.scss ,並於HTML 加入  js link : <script src="/javascripts/all.js"></script>
      • 遇到加入 js link 網頁卻無法運行 JS 。 因為目前 Bootstrap 4.4 的版本跟 jQuery 3.5.0 會有問題,所以請執行下方指令做降版本的動作,網頁的 JS 即可正常運作囉 ! ( 可觀看 問答出處 )
$ npm uninstall jquery
$ npm install jquery@3.4.1
  • source / stylesheets 資料夾

    • components 資料夾
      • 客製的元件 ( 例如不規則排版 navpanel.scss ) 可放此,記得 @ import 入 stylesheets / all.scss
    • helpers 資料夾
      • _variables.scss 檔案 ( 複製 node_modules / bootstrap ,如有任何變數要更改,請在 source / helpers /_variables.scss 做更改 )
  • source / stylesheets /all.scss 設定

    • VSCode 終端機 npm install 載入的 node_modules 資料夾 / bootstrap : bootstrap.scss 中所有 scss 複製到 all.scss 中。
      • 可參考此篇問與答
      • source / stylesheets / helpers : _variables.scss 因是客製的部分,所以 @import 的路徑與其它不同 (此檔案為我們本地端的) @import "helpers/variables";
      • 上述的其它路徑是由 node_modules 資料夾內抓來的,因為前面已經使用 include path 將整個 BS 載入,所以以 button 變數為例,可以把 @import 中 node_modules/bootstrap/scss/ 拿掉,變 @import "buttons";
  • public 資料夾:source 資料夾內修改編譯後的檔案,所以不要動此資料夾

  • node_modules 資料夾 : 此資料夾可透過 npm install 指令產生,當你下 npm install 某套件, package.json 就會記錄下來,因此 npm install 後就可根據 package.json 中產生需要的 node_modules

  • 需要改動的都會放在 source 中,並在 gulpfile.js 中去執行編譯的任務,進而產生出 public

  • 最後提交專案只需上傳 ❶ source 資料夾 ❷ public 資料夾

指令整理

# 查看 node.js 版本號
$ node -v

# 查看 npm 版本號
$ npm -v

# 查看 gulp 版本號
$ gulp -v

#刪除全域 gulp
$ npm uninstall gulp -g

#安裝 gulp 相關環境。 npm install gulp@版本 -g,例如要安裝 3.9.1版本,如下:
# 另外 Mac 遇到權限問題可於 npm 前方加入 sudo
$ npm install gulp@3.9.1 -g

# npm install 某套件, package.json 就會記錄下來,因此 npm install 後就可根據 package.json 中產生需要的 node_modules。
$ npm install

| 問題 | 問答出處 

佈署 Bootstrap 專案,HTML 載入  ,網頁卻無法運行 JS ?

| 答案 |

目前 Bootstrap 4.4 的版本跟 jQuery 3.5.0 會有問題,所以需要把 jQuery 降級,執行下方指令

npm uninstall jquery
npm install jquery@3.4.1

| 步驟 |

  • 開啟專案檔案 package-lock.json ,Ctrl + f 搜尋 jQuery ,可見 jQuery 為 3.5.0 版本。

Bootstrap-package-lock.json中js的版本

  • 於 VSCode 終端機輸入下方指令,進行版本降級
    • npm uninstall jquery
    • npm install jquery@3.4.1
  • 在開啟專案檔案 package-lock.json 可見 jQuery 降為 3.4.1 版本
  • Bootstrap 的 JS 可正常運行了

[ 註 ] 如果遇到執行 gulp 有問題可以看 解決客製 Bootstrap 使用 gulp 環境遇到的問題 ( MAC , Windows )


參考文章

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

作者