搭建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 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
安装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开发环境的更多相关文章
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
- 用grunt搭建自动化的web前端开发环境-完整教程
原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境
用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...
- grunt搭建自动化的web前端开发环境(转)
1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了, ...
- 使用grunt搭建自动化的web前端开发环境
使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...
- Docker + node(koa) + nginx + mysql 开发环境搭建
什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然 ...
- windows系统下ruby开发环境的搭建方法
ruby是一种简单快捷的面向对象的脚本语言,非常直观.下面说一下windows系统下ruby开发环境的搭建方法. 工具/原料 rubyinstaller.exe 方法/步骤 1 到如下网站去下载最新的 ...
随机推荐
- Java 学习 day03
01-语句(while) 02-语句(do while) 03-语句(for) 04-语句(for和while的区别) 05-语句(循环语句的其他特点) 06-语句(for语句练习-累加&计数 ...
- LA 3882 And Then There Was One[约瑟夫问题的变形]
And Then There Was One UVALive - 3882 Sample Input Sample Output //设f[i]为(原约瑟夫问题)第i次要删除的标号 #includ ...
- C ~ 指针的运算
一 :取地址运算“&”与取内容运算“*”: 单目运算“&”是取操作对象的地址 , “*”是取指针指向的对象的内容 , 两者互为逆运算 int x , *p ; p = &x ; ...
- 认识与入门 Markdown
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...
- Maven简介(五)——pom.xml
6 Maven的pom.xml介绍 6.1 简介 pom.xml文件是Maven进行工作的主要配置文件.在这个文件中我们可以配置Maven项目的groupId.artifactId ...
- UEditor上传文件的默认地址修改
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text.Re ...
- c++的最小整数和最大整数
#include<iostream> #include<cmath> using namespace std; int main() { //int -2147483648~2 ...
- vs2015professional过期后登录微软账户仍然不能使用的解决方法
今天安装了vs2015pro版,找到了一个可以正常使用的密钥 2015 pro(专业版)key:HMGNV-WCYXV-X7G9W-YCX63-B98R2 注意是专业版,非企业版 来源:https:/ ...
- listen 75
Hot Jupiters Smarten Search For Other Earths Scientists are looking for Earth like planets around ot ...
- listen 67
Pay What You Want May Deter Consumers Music, film and video game makers face a new online, digital w ...