[環境]搭建Node+NPM+Grunt+Ruby開發環境

標籤：ruby   coffeescript   nodejs   grunt   sass   

序

最近嘗試了一下CoffeeScript，和Sass，不得不說這兩個搭配起來的確是不錯的選擇，熟悉以後基本上開發就比較快速了。
當然要開發這個首先需要搭建環境，這裡就需要有Node、NPM、Grunt、Ruby。
Node與NPM基本上是一套安裝，有了Node環境後才能搭建後面的CoffeeScript環境；而Ruby是為了執行Sass編譯命令所需要的環境，當然最後還有一個Grunt，這個是為了項目構建的方便，一體化構建，不用自己重複執行編譯命令。

Ruby

Ruby，一種為簡單快捷的物件導向編程（物件導向程式設計）而創的指令碼語言，在20世紀90年代由日本人松本行弘(Yukihiro Matsumoto)開發，遵守GPL協議和Ruby License。

安裝步驟在：
[環境搭建]Windows下安裝Ruby和Jekyll
最新版本：
Ruby 2.2.3
DEVELOPMENT KIT 2.0

Node

JavaScript是一種運行在瀏覽器的指令碼，它簡單，輕巧，易於編輯，這種指令碼通常用於瀏覽器的前端編程，但是一位開發人員Ryan有一天發現這種前端式的指令碼語言可以運行在伺服器上的時候，一場席捲全球的風暴就開始了。

Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴充的網路應用。Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分布式裝置上啟動並執行資料密集型的即時應用。

Node是一個Javascript運行環境(runtime)。實際上它是對Google V8引擎進行了封裝。V8引擎執行Javascript的速度非常快，效能非常好。Node對一些特殊用例進行了最佳化，提供了替代的API，使得V8在非瀏覽器環境下運行得更好。

Node 的安裝現在Windows已經有直接安裝檔案了；進入官網你會看見：

版本已經是：4.0 ，同時基於 Chrome’s V8 JavaScript engine

下載後可直接安裝，需要注意的是，安裝檔案分為：msi和exe，簡單的說msi將會自動設定環境變數，同時安裝一些外掛程式；如果你選擇的exe則需要把安裝目錄加入到環境變數。

NPM

Node下的外掛程式管理工具，全名：Node Package Manager。
如果你是安裝的msi檔案，則該外掛程式可能已經帶有了，當然也可以重複安裝。

開啟網站，找到下面的Windows安裝msi檔案連結。

我們選擇這裡：

然後這裡：

滾動到最後，找到最新的安裝檔案：

似乎最新的並不是msi檔案，而是一個壓縮包；下載後，解壓到一個目錄，如：D:\Tools\npm
解壓完成後管理員身份執行壓縮包所帶的 npm.cmd 檔案；到此NPM安裝完成。

檢驗

OK，有了上面的環境我們就能直接通過命令搭建Grunt、Sass、和CoffeeScript環境了。

命令列執行：

node -vnpm -vruby -v

Grunt

一句話：自動化。對於需要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 檔案正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作。

中文官網：http://www.gruntjs.net/

安裝Grunt很簡單，命令列執行：

npm install -g grunt-cli

詳細安裝步驟：http://www.gruntjs.net/getting-started

CoffeeScript

CoffeeScript 是一門編譯到 JavaScript 的小巧語言. 在 Java 般笨拙的外表下, JavaScript 其實有著一顆華麗的心臟. CoffeeScript 嘗試用簡潔的方式展示 JavaScript 優秀的部分.

CoffeeScript 的指導原則是: “她僅僅是 JavaScript”. 代碼一一對應地編譯到 JS, 不會在編譯過程中進行解釋. 已有的 JavaScript 類庫可以無縫地和 CoffeeScript 搭配使用, 反之亦然. 編譯後的代碼是可讀的, 且經過美化, 能在所有 JavaScript 環境中運行, 並且應該和對應手寫的 JavaScript 一樣快或者更快.

中文官網：http://coffee-script.org/

安裝：

npm install -g coffee-script

Sass

Sass 是啥？這個東東簡化了css開發，可以通過屬性等操作開發，而後產生為css代碼。

要編譯 Sass 我們使用 Grunt 構建工具進行編譯，此時需要用到庫：
grunt-contrib-sass
安裝Sass的方法為:

npm install grunt-contrib-sass --save-dev

執行編譯命令：

grunt sass

當然這裡需要用到 sass 命令，該命令依賴於 Ruby，所以需要在 Ruby 中進行安裝。
命令列：

// 發行版gem install sass// 如果要安裝beta版本的gem install sass --pre// 如果從sass的Git repository來安裝git clone git://github.com/nex3/sass.gitcd sassrake install

升級sass版本的命令列為：

gem update sass

如果成功，此時你應該可以執行查看命令：

sass -vsass -h

當然由於牆的原因你可能會遇到：

Error fetching https://rubygems.org/:
Errno::ECONNABORTED: An established connection was aborted by the softwa re in your host machine. - SSL_connect
(https://api.rubygems.org/specs.4.8.gz)

原因是因為：https://rubygems.org/ 在國內訪問可能會出現問題。
我們需要執行的命令為：

gem sources -r https://rubygems.org/gem sources -a http://rubygems.org/gem sources -l

意思就是把下載源從 https://rubygems.org/ 換為 http://rubygems.org/

快速入門

這裡本來想寫的，但是發現一寫就寫的太多了，還是後面有時間再來吧；如果感興趣你可以看看 Grunt 的快速入門：http://www.gruntjs.net/getting-started

然後自己敲一些 CoffeeScript 和Sass代碼來編譯試試；真的挺不錯的~

========================================================
qiujuer
部落格：blog.csdn.net/qiujuer
網站：www.qiujuer.net
開源庫：github.com/qiujuer/Genius-Android
開源庫：github.com/qiujuer/Blink
轉載請註明出處：http://blog.csdn.net/qiujuer/article/details/48339139
—— 學之開源，用於開源；初學者的心態，與君共勉！

========================================================

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

[環境]搭建Node+NPM+Grunt+Ruby開發環境