現代化 Web 開發技術學習分享

0%

Gulp 前端自動化 - 客製化 Bootstrap 樣式並進行編譯

前言

Bootstrap 目前已經算是前端必備的技能了,相信大部分人在使用時都是以 CDN 的方式進行載入,但這樣子的作法等同於將整個官方預編譯好的 Bootstrap 進行載入,當我們需要客製化 Bootstrap 樣式時,必定得採取其他方法。此篇將介紹如何使用 npm 方式載入 Bootstrap,並透過 Gulp 編譯屬於我們自己的客製化樣式。

筆記重點

  • 相關套件安裝
  • 客製並編譯 Bootstrap 預設變數
  • 客製並編譯 Bootstrap 載入元件

相關套件安裝

套件連結:gulp-sassgulp-postcssautoprefixerbootstrap

bootstrap:

1
$ npm install bootstrap

require:

1
$ npm install gulp-sass gulp-postcss autoprefixer

Bootstrap 4 主要由 SCSS 建構而成,當你使用 npm 方式進行安裝時,在下載下來的 package 內即包含未編譯的 SCSS 原始檔案,我們可以針對這一個原始檔案進行客製化並編譯它,在這邊使用 gulp-sass 套件進行編譯,由於 Bootstrap 官方的預編譯版本有使用到 autoprefixer 插件以便自動在構建時向某些 CSS 屬性增加前輟詞,我們在處理編譯後檔案時,也必須參照此作法,所以同時安裝了 gulp-postcss 與 autoprefixer 套件。

客製並編譯 Bootstrap 預設變數

此次範例會結合 gulp-sass、gulp-postcss 套件一起使用,相關文章連結:gulp-sassgulp-postcss

初始專案結構:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gulp-demo/

├─── node_modules/
├─── source/
│ │
│ └─── scss/
│ │
│ └─── helpers
│ │
│ └─── _variables.scss # 新增並修改 Bootstrap 預設變數
│ │
│ └─── all.scss # SCSS 主檔案

├─── gulpfile.js # Gulp 配置檔案
├─── package-lock.json
└─── package.json # 安裝 gulp、gulp-sass、gulp-postcss、autoprefixer、bootstrap
推薦使用懶人覆蓋法,將 ./node_modules/bootstrap/scss/_variables.scss 另存新檔至本地端

新增 ./source/scss/helpers/_variables.scss 並修改預設變數(須查詢預設變數名稱):

1
2
3
4
/* 查詢 node_modules/bootstrap/scss/_variables.scss 預設變數並新增到本地檔案 */

$primary: #178ba0; // 隨意修改變數
$success: #35a327;

新增 ./source/scss/helpers/_variables.scss 並修改預設變數(懶人覆蓋法):

1
2
3
4
5
/* 另存新檔 node_modules/bootstrap/scss/_variables.scss 預設變數並修改 */

// 其他省略 ...
$primary: #178ba0; // $blue !default;
$success: #35a327; // $green !default;

根據官方文檔說明,Bootstrap 4 中的每個 SCSS 變數都包含 !default 標誌,允許您在自己的 SCSS 中覆蓋變數的預設值,而無需修改 Bootstrap 的原始碼。唯一要注意的是新變數必須在導入 Bootstrap 的 SCSS 主文件之前,否則無法成功,如下範例:

includePaths 為 gulp-sass 套件的可傳遞選項,接受屬性值為字串符陣列,默認為空陣列,主要用來讓解析引擎遍歷這些傳入的路徑,尋找 SCSS 模塊,已嘗試解析 @import 宣告

路徑:./source/scss/all.scss

1
2
3
4
5
6
7
8
9
10
/* --- Required (使用 includePaths 方法) --- */
@import 'functions';
@import './helpers/variables'; // 使用本地檔案
@import 'mixins';

/* --- Bootstrap 主檔案 --- */
// @import "../../node_modules/bootstrap/scss/bootstrap.scss";

/* --- Bootstrap 主檔案 (使用 includePaths 方法)--- */
@import 'bootstrap';

編寫 gulpfile.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');

/* --- SCSS 編譯 --- */
gulp.task('sass', () => {
return gulp
.src('./source/scss/*.scss')
.pipe(
sass({
outputStyle: 'compressed', // 執行壓縮
includePaths: ['node_modules/bootstrap/scss/'], // 導入 sass 模塊可能路徑
}).on('error', sass.logError)
)
.pipe(postcss([autoprefixer()])) // 加入 CSS Prefix
.pipe(gulp.dest('./public/css'));
});

建立 .browserslistrc 並輸入官方編譯版本:

1
2
3
4
5
6
7
8
9
10
11
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

依造官方 Browsers and devices 文檔說明,使用 Autoprefixer 可搭配 Browserslist 進行 CSS Prefix 支援裝置設定,上面為官方預編譯各裝置支援版本。

執行指定任務:

1
$ gulp sass

生成 ./public/css/all.css 檔案,觀察 Bootstrap 預設變數是否成功更改:

官方預編譯版本:

1
2
3
4
5
6
7
8
9
.text-primary {
color: #007bff !important;
}

.text-success {
color: #28a745 !important;
}

// 其他省略

客製化版本:

1
2
3
4
5
6
7
8
9
.text-primary {
color: #178ba0 !important;
}

.text-success {
color: #35a327 !important;
}

// 其他省略

由上面結果可得知,Bootstrap 預設變數已經被我們給覆蓋掉,同時也代表整個流程正確無誤,事實上 Bootstrap 客製化應用都大同小異,差別只在於你想要如何客製化 Bootstrap 而已。

客製並編譯 Bootstrap 載入元件

Bootstrap 最為人詬病的問題大概就是 package 實在是太大了,雖然可透過壓縮方式進行縮小化,但與 Pure.css 等同類型框架相比還是太大了,內含的許多元件在實際開發時,幾乎都用不太到,造成空間的浪費;我們可以嘗試客製 Bootstrap 載入元件,以減少 package 的大小,讓我們先從 Bootstrap 架構開始說明:

Bootstrap 組成架構:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 路徑:node_modules/bootstrap/scss/bootstrap.scss

@import 'functions';
@import 'variables';
@import 'mixins';
@import 'root';
@import 'reboot';
@import 'type';
@import 'images';
@import 'code';
@import 'grid';
@import 'tables';
@import 'forms';
@import 'buttons';
@import 'transitions';
// 以下省略 ...

Bootstrap 是一個標準的 OOCSS 範例,也因為使用此設計準則,我們可以很輕鬆的移除沒有使用到的元件。請先將 Bootstrap 主檔案內容複製到 ./source/scss/all.scss 內,接著註釋掉不需使用的元件,如下範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 路徑:./source/scss/all.scss

// Required
@import 'functions';
@import 'variables';
@import 'mixins';

// 自訂需載入的元件
@import 'forms';
@import 'buttons';
// @import "transitions";
// @import "dropdown";
@import 'button-group';
// ... 以下省略

gulpfile.js 檔案內容如同前面範例,這邊要注意的是,functionvariablesmixins 是必要載入的檔案,所有元件都須依賴這三個檔案。

執行指定任務

1
$ gulp sass

最後觀察編譯後 CSS 檔案,你會發現檔案縮小了很多,這就是客製化 Bootstrap 載入元件的方法,在每次開發後可自行載入須使用的元件,有利於減少 CSS 檔案大小。