Grunt FTP Deploy，一行 command line 就上 code!

我還記得以前在還在接案公司的時候，那時候程式沒有很好，(當然現在也沒有到多好...)，以前要更新程式碼到 server，都還是用 FIleZIlla，當然我不是瞧不起 FIleZilla...，而是檔案散佈很多不同資料夾，或只需要更新特定檔案時，找來找去實在很麻煩。

幾年後出現了 Grunt 這樣子的前端自動化工具之後，減少了不需要安裝 FileZilla 的麻煩，當然 Gulp 也有類似的工具。(我個人比較習慣 Grunt，所以 Gulp 就不多做介紹了..)

好處是因為 Grunt 已經幫我處理掉很多前端的事情了，像是 CSS, JavaScript 檔案壓縮，語法檢查等等，那麼如果連 FTP 都可以透過 Grunt 做掉，也是蠻方便的，現在我用的套件是這個:  zonak/grunt-ftp-deploy。

npm 套件的安裝清一色幾乎都是一樣的流程。必要條件是你必須要安裝:
＊Node.js
＊npm
而因為我們用的是 Grunt 的工具，因此也要裝 Grunt:
＊Grunt

必要的項目的裝完了之後，在自己的資料夾下安裝  Grunt ftp deploy
npm install grunt-ftp-deploy --save-dev

同樣的，你也必須有一個 Gruntfile.js，官網有非常詳細的 example，你可以從那裡 copy，接著看 github 上的說明或範例，直接拷貝。

目錄底下的 package.json 起碼會有這些東西: (如果你不知道什麼是 package.json，那請你在你網站的根目錄底下下 npm i 指令，一直按 enter，就會建立一個預設的 package.json)
＊"grunt": "^0.4.5",
＊"grunt-ftp-deploy": "^0.1.10"


接著這是我的 Gruntfile.js，這只是個 sample，給你參考用，其實跟官網的差不多...：
因為 FTP 連線需要帳號密碼，你要在目錄下也建立一個 .ftpconfig (Auth 的 .ftpconfig) 填入你的帳號密碼，然後在 Gruntfile.js 說明是用哪一組 Key 去登入 (Auth 的 authKey)。

然後我在 registerTask 指定當 Grunt 接收到 push 指令的時候，就幫我執行 ftp-deploy 的行為，把 src 目錄下的東西拷貝到 dest 目錄下的地方。

其實有些時候 FTP 也蠻管用的，只是我現在很少用到就是了...
非不得已的情況下，比方說 server 不允許 ssh 之類的，那就可以考慮看看用 Grunt 嘍!

前端工作流程筆記

最近剛好在看一些前端工作流程 (Frontend Workflow) 的文章或是 slide，說到前端的工作流程，不外乎就是想要做到自動化，要『省時, 省力, 省麻煩...』，不過以我自己的認知，一個團隊，有人是負責 follow 這些流程的人，當然也有制定流程跟規則的人，不知道為什麼，以最近接觸 Grunt 的程度來說，我覺得一個團隊負責處理這些自動化流程的人真是挺不簡單，以 Grunt 來說，有這麼多 plugin，身為制定自動化流程的人，或許要很熟悉什麼套件做什麼事情，才會更適合某個專案使用。算了，其實我現在也沒到這個等級 ，這邊就不多談了xdd

以下是筆記的部分：
關於自動化工作流程，幾乎網路上的文章，都會提到 Bower, Grunt, Yeoman。

Grunt 與 Bower

• Bower 是 Twitter 開發的前端套件管理工具 (Frontend Package Manager)。
• Bower 需要 node.js 環境以及 npm。
• 安裝: npm install -g bower。
• bower.json 可以先設定一些預設的相依性套件 ( bower 在 0.9.0 以前是使用 component.json ， 0.9.0 之後使用 bower.json )
  (這個跟 npm install 時要用的 package.json 很像)。
• 如果編輯完 bower.json 之後還有其他相依性套件 (dependencies) 要使用，可以重新下指令：bower install 或是使用 bower install packagename --save。
• Grunt，一個可以處自動化工作流程的工具，如同 bower 一樣需要 node.js 環境以及使用 npm。
• Gruntfile.js 通常會放在你的根目錄下。
• 這時候我有點疑惑...，有點分不清楚 Grunt 跟  Bower 的差別，上網找了一下解答 

[快快樂樂學SASS系列] Sass 開發環境設定 (搭配 Grunt)

  + 

(Grunt img source : http://gruntjs.com/img/grunt-logo.png)
(Sass img source :http://sass-lang.com/assets/img/logo-235e394c.png)

SASS 開發環境設定，搭配 Grunt 

SASS 需要 Ruby 才能編譯。
所以你一定要有 Ruby 的環境，若只裝 Grunt 是無法編譯的。
Grunt 只是 Task Runner，別誤會一定要用 Grunt...。
SASS 是 CSS 的 Extension Language，可以用比較靈活, 寫 SASS，最後透過 Grunt，幫你去處理編譯的工作 (猜測 Grunt 會請 ruby 編譯)，最後產出 css 檔案。

當初選擇 Grunt 是考慮到整個開發方式最後也需要使用 Grunt 進行 css 壓縮等整合的功能，所以選擇 Grunt。對了，不是說一定要 Grunt 才能編譯 SASS，再次強調它只是幫你做事情的工具。
若你以透過 ruby 安裝 SASS :

1. sudo gem install sass

你可以直接透過 command line 編譯 sass 產出 css 檔案:

1. sass style.scss output_style.css

就先談到這裡，剩下的留到之後再講，SASS 太多人在用了，歡迎大家上網爬好文。


環境必需品 (我是 Mac)
每種作業系統有不同的裝法，可參考 http://sass-lang.com/install（你也可以選擇使用一些現有的 Application）。

• 安裝 ruby  ( Mac本來就有 ruby的環境 )
• 安裝 sass ( sudo gem install sass) 
• 要有 node.js 環境並且安裝 NPM (node package manager)
  注意，如果你安裝的 Grunt 版本大於 0.4.x ， 那你的 node.js 版本要高於 0.8.0
• 安裝 Grunt
• 註：

• 檢測是否有ruby : ruby -v
• 檢測使否有node: node -v
• 檢測是否有裝 npm： npm -v 
• 檢測使否有 grunt : grunt -V (大寫Ｖ)
• 若以上帶 -v 有檢視版本訊息，應該不會有問題，至少我是這樣看的...。

編輯器語法變色設定

• Sublime Text 有 SASS package
• https://github.com/WhatWeDo/Sublime-Text-2-SASS-Package
• 不過我沒有試過 :P

以一個網站的資料夾為例

這是我的網站目錄:
style.css 不會是我要編輯的 css 檔，style.sass 才是，我會讓 style.sass 編譯後去蓋掉 style.css 這個檔案。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md  

接著新增 package.json 以及 Gruntfile.js 這兩個檔案：
這兩個檔案我都寫得很基本，除了這個範例，也就是 sass 會用到的東西之外，也沒加入什麼其他的相依性套件了，通常，Gruntfile.js 會用到很多套件，像是 cssmin, uglify 等等，只是在這邊簡單化。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md     
   |-Gruntfile.js  
   |-package.json  

package.json:
package.json 的相依性除了要有 grunt 之外，也要包含 grunt 的 sass 的套件，也就是 grunt-contrib-sass。
Gruntfile.js:

接著在 command line 到資料夾根目錄，以我來說是 /Users/win/Sites/demo_web。

接著下 npm install ，把會用到的相依性套件下載下來，接著就會產生 node_modules 目錄。

 npm install  

接著編輯我的 style.sass:
寫一些簡單的 sass

 $primary_color : #fff  
 body  
   color : $primary_color  
 a   
   color : $primary_color  

編輯完 sass 之後，下 Grunt 指令，就開始幫你工作了:)

Done, without errors，沒有任何編譯的 error 就會出現這句，接著再去看 style.css 編譯後的結果就可以了。


這是 before 跟 after 的結果：

實在挺方便的，接著就是好好看熟 SASS 怎麼用。
其實網路上的教學看一看，不難上手。


可以參考一些好文：

• SASS用法指南 作者： 阮一峰
• Modern Frontend Development with Sass & Compass 作者：Sven Wolfermann
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• Sass & Compass / W3CTech Shanghai by Liang-Bin Hsueh
• Getting started with Grunt and Sass