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

gonggong 8年前發布 | 52K 次閱讀 Ruby開發

來自： http://blog.csdn.net//qiujuer/article/details/48339139

序

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

Ruby

Ruby，一種為簡單快捷的面向對象編程（面向對象程序設計）而創的腳本語言，在20世紀90年代由日本人松本行弘(Yukihiro Matsumoto)開發，遵守GPL協議和Ruby License。
</blockquote>

安裝步驟在：
[環境搭建]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在非瀏覽器環境下運行得更好。
</blockquote>

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

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

下載后可直接安裝，需要注意的是，安裝文件分為：msi和exe，簡單的說msi將會自動配置環境變量，同時安裝一些插件；如果你選擇的exe則需要把安裝目錄加入到環境變量。

NPM
Node下的插件管理工具，全名：Node Package Manager。
如果你是安裝的msi文件，則該插件可能已經帶有了，當然也可以重復安裝。
</blockquote>

打開網站，找到下面的Windows安裝msi文件鏈接。

我們選擇這里：

然后這里：

滾動到最后，找到最新的安裝文件：

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

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

命令行執行：
node -v
npm -v
ruby -v
Grunt
一句話：自動化。對于需要反復重復的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工作。
</blockquote>

中文官網：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 一樣快或者更快.
</blockquote>

中文官網：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.git
cd sass
rake install</pre> 
升級sass版本的命令行為：

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

sass -v
sass -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)
</blockquote>
原因是因為：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 

—— 學之開源，用于開源；初學者的心態，與君共勉！

========================================================
</div>
                    