搭建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