設定 Bootstrap/SASS/Bower/gulp (Windows平台)

標籤：

請注意：在進行以下步驟前，你會需要先安裝git，可以參考這篇 git安裝教學

前言

時至今日，幾乎每個人都在討論bootstrap、less 或 sass。我們知道它們是比較新的前端技術，而且有開始愈來愈流流行的趨勢，但是到底要怎麼使用它們?

想像一下我們現在有個新的專案會需要使用到 bootstrap，但是我們也想要做點修改，該怎麼做呢?

假設你已經知道什麼是 Bootstrap 與 SASS，但是我們不知道要從哪裡開始才好，這個教學將會教你如何為你的專案設定一些輔助工具。

1. 安裝 node.js

如果你不知道什麼是 node.js，請參考 http://nodejs.org/ ，基本上你會需要安裝 node.js 來安裝 gulp 與 bower。要安裝 node.js 相當容易，到 http://nodejs.org/download/ 為你使用的作業系統下載安裝套件，你應該只需要下載與安裝 msi 檔案。
在完成安裝後，開啟你的命令提示字元(cmd.exe)，輸入 ‘node -v’ 後你應該會看到這個畫面:

如果你看到 ‘指定的名稱無法辨識為內部或外部命令、 可執行的程式或批次檔中。’ (‘node’ is not recognized as an internal or external command….) ，這裡有解決方式

2. 安裝 SASS

在你開始使用 Sass 之前，你會需要安裝 Ruby ，最快的方式就是使用 Ruby 安裝套件來安裝在你的Windows電腦上，這是個快速安裝套件，只要點一下滑鼠就可以輕鬆的把 Ruby 快速安裝好。這個安裝套件也會安裝 Ruby 命令列介面應用程式來讓你使用Ruby函式庫。

一旦你成功安裝了 Ruby，你可以開啟命令提示字元，輸入 ‘gem install sass’ :

3. 安裝 Bower(非必需)

Bower 是一個套件管理程式，它可以幫助你從 git 上面下載像是 jQuery 或是 bootstrap 的許多套件，它也可以幫助你方便更新套件，你可以在http://bower.io/找到更多資訊

安裝 bower 相當簡單，只要開啟命令提示字元，然後輸入:
npm install -g bower
(請注意，在你安裝 bower 之前，你需要先安裝 node.js 與 git )

4. 下載 bootstrap

一旦你已經安裝bower，你可以輕鬆利用命令提示字元輸入指令下載 bootstrap (我愛打指令:) )，如果你沒安裝 bower 也沒關係，你可以到 http://getbootstrap.com/getting-started/#download 下載，請確定你下載的是 Sass 版本，因為我們要用的是 Sass。

要利用 bower 下載，開啟命令提示字元，進入專案目錄，例如 : “C:\sites\test\trunk\wp-content\themes\vantage” ，然後輸入:
bower search bootstrap
基本上，bower 會搜尋 git 軟體倉庫裡有 ‘bootstrap’ 的所有套件，因為 bootstrap 的相關套件很多，你會得到一份很長的搜尋結果，我們要找的是 ‘bootstrap-sass-official’。

命令提示字元輸入:
bower install bootstrap-sass-official
你大概注意到它也幫你下載了 jquery 套件，因為 bootstrap 的 javascript 必需依賴 jQuery。不過如果你是開發 WordPress 專案的話，其實你並不需要使用到它幫你下載的 jQuery ，因為 WordPress 本身已經內建 jQuery 了。

5. 安裝/設定 gulp

現在我們已經安裝了許多的小工具，gulp 可以幫我們把這些小工具全部連結起來。Getting Started With Gulp 是一個非常好的教學，它可以教你如何安裝設定好 gulp。現在假設你是開啟命令提示字元，而且你還是在你的專案目錄底下（我的是 “C:\sites\test\trunk\wp-content\themes\vantage”）。

建立 package.json

在命令提示字元, 輸入:
npm init
這會建立 package.json 檔案來提供關於我們專案的資訊，而且也幫助管理我們的相依套件。它會問你名稱、版本與其它的問題，只要輸入相關的內容然後按Enter。

全域安裝 gulp

在命令提示字元, 輸入:
npm install -g gulp
這會安裝gulp，而且將來的專案再也不需要再安裝一次

本地安裝 gulp

在命令提示字元, 輸入:
npm install --save-dev gulp

6. 測試一下

現在我們希望使用 gulp 來幫我們把使用 bootstrap 的 scss 檔做編譯，首先我們需要安裝以下的外掛：

在命令提示字元, 輸入:
npm install gulp-sass --save-dev
現在該裝的都裝好了，讓我們來看一下 gulp 和 sass 能幫我們做些什麼。在專案目錄底下，我已經建立了一個 scss 的目錄名稱來存放我的 sass 或 scss 檔，而且我也建立了一個檔案叫做 gulpfile.js 內容如下：

 // Include gulpvar gulp = require(‘gulp‘);// Include 外掛var sass = require(‘gulp-sass‘);// 編譯 Sassgulp.task(‘sass‘, function() { return gulp.src(‘scss/*.scss‘) .pipe(sass()) .pipe(gulp.dest(‘css‘));});/**sass 工作會編譯任何在 scss/ 目錄底下的 .Sass 檔，而且會把檔案存在 css/ 底下為 .css 檔**/// Watch Files For Changesgulp.task(‘watch‘, function() { gulp.watch(‘scss/*.scss‘, [‘sass‘]);});// 預設工作gulp.task(‘default‘, [‘sass‘]);

12345678910111213141516171819

// Include gulpvar gulp = require(‘gulp‘);// Include 外掛var sass = require(‘gulp-sass‘);// 編譯 Sassgulp.task(‘sass‘, function() {    return gulp.src(‘scss/*.scss‘)    .pipe(sass())    .pipe(gulp.dest(‘css‘));});/**sass 工作會編譯任何在 scss/ 目錄底下的 .Sass 檔，而且會把檔案存在 css/ 底下為 .css 檔**/// Watch Files For Changesgulp.task(‘watch‘, function() {    gulp.watch(‘scss/*.scss‘, [‘sass‘]);});// 預設工作gulp.task(‘default‘, [‘sass‘]);

為了做測試，我在 scss 目錄內建立了一個 test.scss 檔，內容如下。請注意，我已經從 bower 元件匯入了 bootstrap 的 scss 檔，所以如果你不是使用 bower ，你可以更改指向你的 bootstrap 檔的路徑。

 @import ‘../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap‘;nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}.myscss { @extend .col-sm-1; border-color: red;}

123456789101112131415161718

@import ‘../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap‘;nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}.myscss {  @extend .col-sm-1;  border-color: red;}

現在在命令提示字元, 輸入: ‘gulp’ 來執行你的預設工作，或是 ‘gulp sass’ 來執行特定的工作，這其實就跟我們目前的狀況一樣，在預設工作列表裡只有一個工作需要執行。
gulp
你應該會看到

現在如果我們到 css 目錄，我們應該會看到 test.css 已經建立了，bootstrap 與 我們自訂的 style 都在裡面，搞定

轉載：http://www.innovext.com/tw/2014/07/11/%E8%A8%AD%E5%AE%9A-bootstrapsassbowergulp-windows%E5%B9%B3%E5%8F%B0/

設定 Bootstrap/SASS/Bower/gulp (Windows平台)