2020/01/04 Sass/Scss 教學筆記: 用Gulp建置Sass編譯環境並瞭解基礎Git flow

綱要

• 2020/01/04 Sass/Scss 教學筆記: 用Gulp建置Sass編譯環境並瞭解基礎Git flow
  • 安裝Git
  • 建立屬於自己的Git版本控制環境來連動Github
  • 安裝NodeJS
  • MAC OSX 權限設定調整
  • 初始化專案以及排除背景作業檔案
  • 本日後記

安裝Git

Mac OSX

Mac有內建Git的關係，可以不需要額外安裝Git主程式、也不需做任何設定

Windows

安裝檔下載網址：https://git-scm.com/download/win

Win 10還需要設定系統環境變數的關係，安裝好Git之後我們必須進入到電腦的系統環境變數去新增 bin 位置，首先進入到「設定」，然後搜尋「系統環境變數」，點進會看到這個視窗：

接著在系統變數處按下編輯

到Git安裝好的目錄下找出bin的路徑，複製後貼到最後一個分號「;」的後面，確認後讓電腦重新開機。

重開機後打開終端機，也就是命令提示字元（一定要以系統管理員身份開啟）後輸入 git

看到這串訊息後代表Git安裝成功了。

建立屬於自己的Git版本控制環境來連動Github

1.申請一組Github帳號並新建立一個專案

按下New就會進入以下新增畫面

1. 建立一個名為 sass_0208 的專案
2. Description可以略過不填，權限設置付費才能使用Private的關係，預設是Public就好
3. Add license選擇「MIT」

2. 選用Git軟體來進行版本控制

https://www.syntevo.com/smartgit/

SmartGit是個簡潔、功能又齊全的Git版本控制圖形介面軟體，所有操作可以在同一個畫面裡面完成，不像 GitKraken 或 SourceTree 那般外觀設計精美，卻也非常強大且容易使用，學習成本低。

如果你還沒打算付費使用的話，可以在安裝時選擇試用或者非商用(非商用每次啟動都有三十秒的告示)，日後有興趣再來取得授權。

安裝好SmartGit後 (過程都用預設設定) ，在電腦中任意位置建立一個新的目錄叫做web，回到剛剛Github我們建立好的 sass_0208 專案頁面，並且按下Code 的按鈕，就會看到一串網址，將它複製下來。

在SmartGit的畫面最上方主選單選擇 Repository -> Clone 並貼入剛才的HTTPS網址後往下一步

保持這個設定繼續往下

注意路徑必須和你的專案同名喔，確認後按下Finish

假如你使用的是非商用免費授權版，每次啟動都會看到這個畫面，30秒後可以關閉它
現在專案已經透過 git clone 的方式下載到你的local端囉，之後有任何檔案變更都會反映在畫面上，直到你 Commit 並 Push 上去 Github。

左下角這裡會顯示你本地端有什麼分支以及主線(master)、還有遠端來源的所有分支

現在我們來開一個叫做 0208 的分支，滑鼠點兩下master，或者在確認箭頭是指著master的狀態下，右鍵選取Local Branches 的字樣，並選擇 Add branch，輸入 0208 按下確認，畫面上就會出現這個名稱的分支。

因為剛開啟的分支，遠端Github還不會知道你有這個分支，所以繼續用右鍵點一下分支名稱，選擇Push，Git就會把這個分支推送到專案來源，畫面上 0208 此時會變成 0208 = origin，代表遠端已經儲存了你的分支。

現在到Github專案頁面上已經可以看見剛剛的 0208 分支被記錄進去了

---

安裝NodeJS

下載NodeJS：https://nodejs.org/en/

由於Gulp任務管理工具是Base on NodeJS的關係必須另外安裝NodeJS，盡量使用標示LTS的穩定版本

安裝結束後在終端機下鍵入 npm 就會看到這組訊息，代表已經安裝成功

MAC OSX 權限設定調整

假如你上課用的電腦是MAC OSX環境，而從來沒有取得過寫入系統的管理權限，務必參考以下的做法。因為我們在安裝任何需要global全域形式的NodeJS套件都會動用到系統環境資源。

(圖片來源：https://www.jianshu.com/p/976810138d35)

假如沒有設定系統權限，npm install -g 的指令就會像這樣顯示失敗

我們可以先用權限檢查指令 ls -l /user/local 來查看目前電腦使用者是否擁有寫入權限：

OSX使用的是Linux指令，最左側的訊息表示：

d : 目錄 (dir)
r : 讀取權 (read)
w : 寫入權 (write)
x : 執行權 (execute)

現在我們可以用這個指令來改寫權限，讓藏在/usr/local/中的node_modules擁有寫入權限：

sudo chown -R $USER /usr/local

注意，sudo指令會需要輸入這台電腦的登入密碼，密碼鍵入時不會顯示任何內容，不是當機喔

---

初始化專案以及排除背景作業檔案

到這應該就能讓 NodeJS 正常安裝全域模組了，接下來要一邊安裝所需套件、一邊增加需要在 .gitignore 排除的項目，讓 node_module 和一些背景作業的檔案被變更時不會進入 git 版控。

從終端機裡面進入我們的sass_0208

假如你是在 user/ 下(通常是顯示使用者名稱)的話，輸入 cd web/sass_0208
如果是用Win10的同學，你想在D槽進行開發的話，打開終端機時輸入d:就會跳轉到D槽

1. 製作packge.json

進入web目錄中的 sass_0208 後，繼續輸入npm init

接下來畫面上會問你一些設定名稱，()代表的是預設值，也可以不在這個階段變更，後面用VSCODE開啟package.json 也能修改

看到生成了一個JSON object就輸入yes確認，NodeJS會在目錄裡建立package.json這個檔案。

2. 安裝Sass相依套件

確認你的終端機路徑在sass_0208後按照以下指令下載安裝套件：

sudo npm install -g gulp
npm install gulp --save
npm install sass --save
npm install node-sass --save
npm install gulp-sass --save
npm install gulp-autoprefixer --save
npm install gulp-connect --save
npm install gulp-sourcemaps --save
npm install browser-sync --save

如果都安裝好了，此時你應該會發現SmartGit上的檔案變更有幾千隻，先不動它。
我們先用VSCODE打開專案目錄：

在根目錄下新增一個檔案，並取名為 .gitignore，這是個專門讓git辨識的規則檔，因為node_modules通常檔案都非常大，所以不會直接丟上Github，而是用package.json記錄安裝了哪些套件，之後換到別的開發裝置上只需要 npm install 這個指令，就會自動重新安裝回來。

現在來編輯.gitignore這個檔案：

node_modules/
.DS_Store
*/.DS_Store
*.DS_Store
_DS_Store
*/_DS_Store
*_DS_Store

.DS_Store 是Mac OSX特有的目錄的自定義屬性記錄檔，平常也算是個根本用不到的東西，所以在這會一併排除。

完成後你會發現原本SmartGit上幾千個檔案變更消失了，因為 .gitignore 有順利運作的關係。

3. 整理好scss與css輸出目錄並建立gulpfile.js

先看整理好的結構：

建立新的src目錄，並且裡頭要包含index.html、img目錄、css目錄、scss目錄。

接著在專案根目錄下新增一個gulpfile.js的檔案，這是Gulp的主要任務管理依據，所有的任務項目都用Javascript的形式定義成Function來預備執行，我們來看看程式碼：

const gulp = require('gulp')       // 載入 gulp
const gulpSass = require('gulp-sass')(require('sass'))  // 載入 gulp-sass
const browserSync = require('browser-sync').create()
const connect = require('gulp-connect')
const sourcemaps = require("gulp-sourcemaps")

function styles() {
	return (
		gulp
			// 指定要處理的 Scss 檔案目錄
			.src("./src/scss/**/*.scss")
			.pipe(sourcemaps.init())
			// 編譯 Scss
			.pipe(gulpSass({
				outputStyle: 'compressed'
			}))

			.on("error", gulpSass.logError)
			.pipe(sourcemaps.write())
			// 指定編譯後的 css 檔案目錄
			.pipe(gulp.dest("./src/css"))
			.pipe(browserSync.stream())
	);
}

function watch() {
	browserSync.init({
		server: {
			baseDir: "./src/"
		}
	});
	gulp.watch('./src/scss/**/*.scss', styles)
	gulp.watch("./src/**/*.html", reload);
}

function reload() {
	browserSync.reload();
}

exports.watch = watch
exports.styles = styles;

到這個步驟我們就來新增一個命名為style.scss的檔案到src/scss，如下所示：

html {
  touch-action: manipulation;
  height: 100%;

  body {
    font-family: "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    touch-action: manipulation;
    height: 100%;
  }
}

…

…

…

嗯？body的樣式怎麼會包在html裡面？沒錯，Sass或Scss格式都是可以有巢狀包覆用來辨識與表達父子關係的喔！這也是之後課堂上講解一些程式邏輯會使用到的概念。

4. 讓Gulp替你編譯Scss

先在VSCODE上的Terminal -> New Terminal 開啟一個內建的終端機視窗，它會自動幫你指向已開啟的專案位置，然後輸入gulp watch

看到這個訊息代表正常編譯完畢，css目錄也會多了一個style.css

之後專案中的html、scss有任何變更被儲存，gulp就會自動幫你編譯並且對瀏覽器做即時更新畫面！

5. 第一次的Git Push

最後，我們可以將所有變更的檔案，全部選取起來並且按下右鍵候選擇commit

commit 一定要輸入本次變更的註解，這是養成開發寫註解的好習慣之一，也可以讓同個專案的同事知道你做了些什麼。

下了commit後，這些變更就正式儲存到你的本地專案中了，不會因為斷電、關機不正常等現象導致做好的工作階段消失。此時你會看見0208這個分支顯示成 0208 1> origin，表示你本地端有一個commit比遠端來源還要新。

對著分支名稱按下右鍵，選擇Push，兩邊同步後就會顯示 0208 = origin

---

本日後記

覺得步驟繁多又有點複雜嗎？

正常，大家都是這樣過來的。

如果這個過程中你都沒什麼障礙的話，恭喜你！你已經跨越了設計師的舒適圈，朝著現代開發主流模式前進，也做到了大多設計師做不到的事情了！這就是提升價值的一種表現。

但如果你有那麼一點小問題也別著急，記錄下你的問題直接問老師都沒關係。

tags: Scss Gulp Git