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

序

最近嘗試了一下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 -v npm -v ruby -v

• 1
• 2
• 3

• 1
• 2
• 3

Grunt

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

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

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

npm install -g grunt-cli

• 1

• 1

詳細安裝步驟：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

• 1

• 1

Sass

Sass 是啥？這個東東簡化了css開發，能夠經過屬性等操做開發，然後生成爲css代碼。

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

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

• 1

• 1

執行編譯命令：

grunt sass

• 1

• 1

固然這裏須要用到 sass 命令，該命令依賴於 Ruby，因此須要在 Ruby 中進行安裝。 
命令行：

// 發行版 gem install sass // 若是要安裝beta版本的 gem install sass --pre // 若是從sass的Git repository來安裝 git clone git://github.com/nex3/sass.git cd sass rake install

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

升級sass版本的命令行爲：

gem update sass

• 1

• 1

若是成功，此時你應該能夠執行查看命令：

sass -v sass -h

• 1
• 2

• 1
• 2

固然因爲牆的緣由你可能會遇到：

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

• 1
• 2
• 3

• 1
• 2
• 3

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

轉載致：http://blog.csdn.net/qiujuer/article/details/48339139