[Environment] Build node+npm+grunt+ruby development environment

Order

Recently tried a bit coffeescript, and sass, have to say that these two together is indeed a good choice, familiar with the development is relatively fast.
Of course to develop this first need to build the environment, here will need to have node, NPM, Grunt, Ruby.
node and NPM are basically a set of installation, with the node environment in order to build the back of the Coffeescript environment, and Ruby is to execute SASS compile commands required environment, of course, finally there is a grunt, this is for the convenience of project construction, integration construction, Do not repeat the compile command yourself.

Ruby

Ruby, a scripting language created for simple and fast object-oriented programming (object-oriented program design), was developed by the Japanese as (Yukihiro Matsumoto) in the 1990s, adhering to the GPL protocol and Ruby License.

The installation steps are:
[Environment Construction] Installing Ruby and Jekyll under Windows
Latest Version:
Ruby 2.2.3
Development KIT 2.0

Node

JavaScript is a script run in the browser, it is simple, lightweight, easy to edit, this script is usually used for front-end programming of the browser, but a developer Ryan discovered that the front-end scripting language can run on the server, a storm sweeping the world began.

node. JS is a platform built on the chrome JavaScript runtime to easily build responsive, easy-to-scale Web applications. node. js is lightweight and efficient with event-driven, non-blocking I/O models and is ideal for data-intensive, real-time applications running on distributed devices.

Node is a JavaScript run environment (runtime). It actually encapsulates the Google V8 engine. The V8 engine executes JavaScript very fast and performs very well. Node optimizes some of the special use cases, providing an alternative API that allows V8 to run better in a non-browser environment.

Node installation now has a direct install file for Windows, you will see:

The version is already: 4.0, based on Chrome's V8 JavaScript engine

Download can be installed directly, it should be noted that the installation file is divided into: MSI and EXE, simply said MSI will automatically configure the environment variables, while installing some plug-ins, if you choose the EXE needs to add the installation directory to the environment variable.

Npm

The Plugin management tool under node, full name: Node Package Manager.
If you are installing an MSI file, the plugin may already be available, but you can also install it repeatedly.

Open the Web site and locate the following Windows installation MSI file link.

We choose here:

Then here:

Scroll to the end to find the latest installation file:

It seems that the latest is not an MSI file, but a compressed package; After downloading, unzip to a directory, such as: D:\TOOLS\NPM
After the decompression is complete, the administrator performs the Npm.cmd file with the compressed package, and the NPM installation is complete.

Inspection

OK, with the above environment we can build grunt, Sass, and coffeescript environment directly through the command.

Command line execution:

-v-v-v

Grunt

Word: Automation. For tasks that require repetitive repetition, such as compression (Minification), compilation, unit testing, linting, and so on, automation tools can ease your labor and simplify your work. When you properly configure the task in the Gruntfile file, the task runner will automatically help you or your team to do most of the boring work.

Chinese Civil Service Network: http://www.gruntjs.net/

Installing grunt is simple, the command line executes:

-g grunt-cli

Detailed installation steps: http://www.gruntjs.net/getting-started

Coffeescript

Coffeescript is a small language compiled into JavaScript. JavaScript actually has a gorgeous heart in Java-like awkward looks. Coffeescript tries to demonstrate the excellent parts of JavaScript in a concise way.

Coffeescript's guiding principle is: "She's just JavaScript." Code one by one is compiled to JS and will not be interpreted during the compilation process. Existing JavaScript libraries can be used seamlessly with Coffeescript, and vice versa. The compiled code is readable and beautified, can run in all JavaScript environments, and should be as fast or faster as the corresponding handwritten javascript.

Chinese Civil Service Network: http://coffee-script.org/

Installation:

-g coffee-script

Sass

What's Sass? This thing simplifies the development of CSS, can be developed through attributes and other operations, and become a CSS code.

To compile Sass we use the Grunt build tool to compile, we need to use the library:
Grunt-contrib-sass
The method for installing SASS is:

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

To execute a compile command:

grunt sass

Of course, you need to use the SASS command, which relies on Ruby, so you need to install it in Ruby.
Command line:

// 发行版gem install sass// 如果要安装beta版本的gem install sass --pre// 如果从sass的Git repository来安装clone git://github.com/nex3/sass.gitcd sassrake install

To upgrade the SASS version of the command behavior:

update sass

If successful, you should be able to perform the view command at this time:

-v-h

Of course as a result of the wall you may encounter:

Error fetching https://rubygems.org/:
Errno::econnaborted:an established connection is aborted by the Softwa re in your host machine. -Ssl_connect
(https://api.rubygems.org/specs.4.8.gz)

The reason for this is because: https://rubygems.org/may have problems with a domestic visit.
The commands we need to execute are:

-r https://rubygems.org/-a http://rubygems.org/-l

It means to change the download source from https://rubygems.org/to http://rubygems.org/.

Quick Start

Here originally wanted to write, but found that write too much, or the back of time to come again; if interested you can look at Grunt Quick start: http://www.gruntjs.net/getting-started

Then you knock some coffeescript and Sass code to compile the test; it's pretty good.

========================================================
Qiujuer
Blog: Blog.csdn.net/qiujuer
Website: www.qiujuer.net
Open Source Library: github.com/qiujuer/genius-android
Open Source Library: Github.com/qiujuer/blink
Reprint Please specify source: http://blog.csdn.net/qiujuer/article/details/48339139
--open source of learning, for open source, beginner's mentality, with June mutual encouragement!

========================================================

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

[Environment] Build node+npm+grunt+ruby development environment