gulp

回主頁

環境安裝

1.打開terminal終端機，輸入node -v

2.輸入npm -v

3.cd 欲安裝的資料夾

4.sudo npm install -g gulp

5.得到以下結果

6.輸入gulp -v，確認gulp版本，得到以下

資料夾

• 透過影片再次了解各資料夾作用及相互之間的關係
• 常用的幾個資料夾跟動做
• public跟source資料夾
• 寫入自己的scss，在source資料夾刪除stylesheet再建立自己的stylesheet
• 能夠從新建立一份scss
• 
  

一、從bootstrap文件Theming Bootstrap可以找到製作方式有兩方法：

1.從Bootstrap載入

• 
  
• // Custom.scss// Option A: Include all of Bootstrap
• @import "../node_modules/bootstrap/scss/bootstrap";

2.客製化一份

• // Custom.scss// Option B: Include parts of Bootstrap
• // Required
• @import "../node_modules/bootstrap/scss/functions";
• @import "../node_modules/bootstrap/scss/variables";
• @import "../node_modules/bootstrap/scss/mixins";
• // Optional
• @import "../node_modules/bootstrap/scss/reboot";
• @import "../node_modules/bootstrap/scss/type";
• @import "../node_modules/bootstrap/scss/images";
• @import "../node_modules/bootstrap/scss/code";
• @import "../node_modules/bootstrap/scss/grid";
• 
  

二、刪除source資料夾的stylesheets，並從新建立一個stylesheets資料夾，然後在裡面新增一個檔案all.scss

三、確認source內index.html有載入all.css

四、從新啟動gulp

五、將「從Bootstrap載入」那段程式碼貼入all.scss，

並把

• ../node_modules/bootstrap/scss/

移除