[筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接

Gulp 搭配上 Bower 和 Bootstrap 4 前端套件,可以快速的做到前端樣板管理。不過 Gulp 4 和前一版的作法有些不同,這邊筆記一下串接的方法。
gulp logo


串接上 Bower

1. Bower 是一套前端套件的管理工具,雖然說是很方便,但 Bootstrap 4 的新版本已經不支援。在這樣的情況下,會需要使用 npm 安裝,再運用打包到前端。
2. 搭配套件有 main-bower-files , 這是自動化工具用來瀏覽 bower.json 下的套件。
3. 需要先安裝 bower (npm i -g bower),再來在目標資料夾下使用 bower init (產生 bower.json),再來運用 bower 指令下載你需要用到的前端工具包(像是 jQuery)

加上 Bootstrap 4

1. 需要運用 npm 安裝,然後再 gulp 指令中導入。
2. 其中的 css 部分,可以運用 sass 的 import 特性,用像是 @import “../../node_modules/bootstrap/scss/bootstrap.scss”; 來讓其編譯時載入即可。


程式碼


參考課程

Course 21 ~ Course 24 (全部一共有 48 Courses)

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。課程連結網址:http://tinyurl.com/y9fp69lb


相關文章

[blogimove-CPC-TAG=hexSchoolGulpIntro-MODE=3]

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:39