最近尝试了一下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

搭建Node+NPM+Grunt+Ruby开发环境的更多相关文章

  1. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  2. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  3. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  4. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  5. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

  6. grunt搭建自动化的web前端开发环境(转)

    1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了, ...

  7. 使用grunt搭建自动化的web前端开发环境

    使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...

  8. Docker + node(koa) + nginx + mysql 开发环境搭建

    什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然 ...

  9. windows系统下ruby开发环境的搭建方法

    ruby是一种简单快捷的面向对象的脚本语言,非常直观.下面说一下windows系统下ruby开发环境的搭建方法. 工具/原料 rubyinstaller.exe 方法/步骤 1 到如下网站去下载最新的 ...

随机推荐

  1. Java 学习 day03

    01-语句(while) 02-语句(do while) 03-语句(for) 04-语句(for和while的区别) 05-语句(循环语句的其他特点) 06-语句(for语句练习-累加&计数 ...

  2. LA 3882 And Then There Was One[约瑟夫问题的变形]

    And Then There Was One UVALive - 3882 Sample Input   Sample Output //设f[i]为(原约瑟夫问题)第i次要删除的标号 #includ ...

  3. C ~ 指针的运算

    一 :取地址运算“&”与取内容运算“*”: 单目运算“&”是取操作对象的地址 , “*”是取指针指向的对象的内容 , 两者互为逆运算 int x , *p ; p = &x ; ...

  4. 认识与入门 Markdown

    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...

  5. Maven简介(五)——pom.xml

    6       Maven的pom.xml介绍 6.1     简介 pom.xml文件是Maven进行工作的主要配置文件.在这个文件中我们可以配置Maven项目的groupId.artifactId ...

  6. UEditor上传文件的默认地址修改

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text.Re ...

  7. c++的最小整数和最大整数

    #include<iostream> #include<cmath> using namespace std; int main() { //int -2147483648~2 ...

  8. vs2015professional过期后登录微软账户仍然不能使用的解决方法

    今天安装了vs2015pro版,找到了一个可以正常使用的密钥 2015 pro(专业版)key:HMGNV-WCYXV-X7G9W-YCX63-B98R2 注意是专业版,非企业版 来源:https:/ ...

  9. listen 75

    Hot Jupiters Smarten Search For Other Earths Scientists are looking for Earth like planets around ot ...

  10. listen 67

    Pay What You Want May Deter Consumers Music, film and video game makers face a new online, digital w ...