章節連結
Gulp 搭配上 Bower 和 Bootstrap 4 前端套件，可以快速的做到前端樣板管理。不過 Gulp 4 和前一版的作法有些不同，這邊筆記一下串接的方法。
串接上 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”; 來讓其編譯時載入即可。
程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const mainBowerFiles = require('main-bower-files'); gulp.task('bower',()=>{ return gulp.src(mainBowerFiles()) // 瀏覽bower下載的檔案 .pipe(gulp.dest('./temp/vendors')) // 暫存到這個資料夾 }) gulp.task('vendors',()=>{ // 取得上一步暫存資料夾的 js 檔案，並加上 bootstrap 所需的兩隻js。 // 這邊的檔案編譯會依照迴圈的順序進行，jQuery 要在 bs4 自己的 js 前頭才不會出錯 return gulp.src([ './temp/vendors/**/*.js', './node_modules/bootstrap/dist/js/bootstrap.min.js', './node_modules/popper.js/dist/umd/popper.min.js', ]) .pipe($.concat('vendors.js')) // 合併成一支叫 vendor.js 的檔案 .pipe(gulp.dest('./public/js')) }) /*task lists by follows*/ gulp.task('default', gulp.series('jade', 'sass', 'babel', gulp.series('bower', 'vendors'),'watch')); |
參考課程
Course 21 ～ Course 24 (全部一共有 48 Courses)
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/y9fp69lb
相關文章
[blogimove-CPC-TAG=hexSchoolGulpIntro-MODE=3]
按讚加入粉絲團
