iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
1
Modern Web

CSS 實戰心法系列 第 16

將 Bootstrap 導入自動化流程

先前的流程我們將 Gulp 的基礎流程已經建立起來了,現在我們要將 Bootstrap 導入自動化流程,讓接下來的客製化更為容易。

Bower

本範例是使用大家所習慣的 Bootstrap 3,如果想用 4 的朋友可以自行修改,手法是幾乎一致的。

範例:https://github.com/Wcc723/ironman-gulp-sass/tree/v0.6.bootstrap

Bower 是前端的套件管理工具,也有許多開發者會使用 NPM 來一起管理,但我個人除了使用 Webpack 以外還是習慣用 Bower 在管理前端套件。

Bower: https://bower.io/

使用 Bower 以前要先安裝 Bower 的工具,而它分為兩個部分,全域的 Bower 指令與專案的 bower.json

首先,先在電腦內安裝 bower (需使用先前的 npm 環境):
npm install -g bower

接下來打開本篇範例,本篇範例已經準備好了 bower.json,這時候只要下 bower install 就能夠開始安裝 bower.json 內的套件檔案。

bower install

http://ithelp.ithome.com.tw/upload/images/20161216/20083608fbSOQ6n7Kf.png

接下來專案內會新增對應的檔案,Bootstrap 的套件需要使用到 jQuery ,此時也會一並出現。

http://ithelp.ithome.com.tw/upload/images/20161216/20083608kZUzSSZpJ2.png

Gulp

這時候已經將 Bootstrap 下載到本地端的資料夾,當然我們也可以用 HTML 直接 <LINK> CSS,不過這樣就無法自定義樣式,先打開 gulpfile.js 看看修改了什麼吧

var path = {
  source: './source/',
  public: './public/',
  bower: './bower_components/'    // 新增 Bower 的路徑
}

gulp.task('sass', function () {
  var processors = [
      autoprefixer({browsers: ['last 5 version']})
  ];
  return gulp.src(path.source + 'scss/**/*.scss')
    .pipe(plumber())
    .pipe(sass(
      {outputStyle: 'expanded',
      includePaths: [path.bower + 'bootstrap-sass/assets/stylesheets']} // 新增 includePaths 將 Bootstrap 載入
    ).on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(gulp.dest(path.public + 'stylesheets'));
});

includePaths 是 Sass 的功能,他可以載入其他路徑的 .sass 作為擴充載入,這部分就是將 Bower 中的 Bootstrap 載入。

完成

打開 all.scss 做以下的調整,直接用 @import "bootstrap"; 就可以將 Bootstrap 載入。

$primary-color: blue;

body {
  color: $primary-color;
}

@import "bootstrap";

http://ithelp.ithome.com.tw/upload/images/20161216/20083608Fohk3YXUhK.png

最後的結果如上,一開始的 color: blue 是我們自己定義的,而後方開始就是完整的 Bootstrap,接下來我們再來了解如何去調整 Bootstrap 的樣式。

文章同時發表於:https://wcc723.github.io/css/2016/12/16/bootstrap-include/


上一篇
為什麼 Boostrap (這篇很短~)
下一篇
Bootstrap 自定義樣式超簡單
系列文
CSS 實戰心法30

尚未有邦友留言

立即登入留言