[Environment] Build Node + NPM + Grunt + Ruby development environment, npmgrunt

[Environment] Build Node + NPM + Grunt + Ruby development environment, npmgrunt
Collation

Recently I tried CoffeeScript and Sass. I have to say that these two are really good choices. After getting familiar with them, development will be faster.
Of course, to develop this, we need to build the environment first. Here we need Node, NPM, Grunt, and Ruby.
Node and NPM are basically a set of installations. With the Node environment, the CoffeeScript environment can be built later. Ruby is the environment required to execute Sass compilation commands, and of course there is a Grunt, this is for the convenience of project construction and integrated construction. You do not need to execute the compilation command repeatedly.

Ruby

Ruby, a scripting language created for simple and quick Object-Oriented Programming (Object-Oriented Programming), was developed by Yukihiro Matsumoto in 1990s by the Japanese, complies with the GPL protocol and Ruby License.

The installation steps are as follows:
[Environment setup] install Ruby and Jekyll in Windows
Latest Version:
Ruby 2.2.3
Development kit 2.0

Node

JavaScript is a script running in a browser. It is simple, lightweight, and easy to edit. This script is usually used for browser frontend programming, but one day, a developer, Ryan, found that this Front-End scripting language could run on the server, and a storm swept the world.

Node. js is a platform based on Chrome JavaScript runtime. It is used to conveniently build fast and scalable network applications. Node. js uses event-driven, lightweight and efficient non-blocking I/O models, making it ideal for data-intensive real-time applications running on distributed devices.

Node is a Javascript runtime environment ). In fact, it encapsulates the Google V8 engine. The V8 engine executes Javascript very quickly and performs very well. Node optimizes some special use cases and provides an alternative API to make V8 run better in a non-browser environment.

Node installation now has a direct Installation File for Windows. You will see it on the official website:

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

After downloading, you can install the tool directly. The installation files include msi and exe. In short, msi automatically configures the environment variables and installs some plug-ins; if you select the exe, you need to add the installation directory to the environment variable.

NPM

Plug-in management tool under Node, full name: Node Package Manager.
If you are installing the msi file, the plug-in may already have it, and you can also install it again.

Open the website and find the following Windows Installation msi file link.

Here we choose:

Then here:

Scroll to the end and find the latest installation file:

It seems that the latest is not an msi file, but a compressed package. After downloading it, decompress it to a directory, such as D: \ Tools \ npm.
After decompression, the Administrator executes the npm. cmd file in the compressed package. The NPM installation is complete.

Inspection

OK. With the above environment, we can directly build the Grunt, Sass, and CoffeeScript environments using commands.

Command Line execution:

node -vnpm -vruby -v

Grunt

One sentence: automation. Automated tools can reduce your work and simplify your work for tasks that need to be repeated over and over again, such as compression, compilation, unit testing, and linting. When you have configured the task correctly in the Gruntfile file, the task runner will automatically help you or your group complete most of the boring work.

Official Website: http://www.gruntjs.net/

Installing Grunt is simple. Run the following command:

npm install -g grunt-cli

Installation Steps: http://www.gruntjs.net/getting-started

CoffeeScript

CoffeeScript is a small language compiled into JavaScript. Under the clumsy appearance of Java, JavaScript actually has a gorgeous heart. CoffeeScript tries to display the excellent parts of JavaScript in a concise way.

The guiding principle of CoffeeScript is: "She is just JavaScript ". the code is compiled to JS one by one instead of being explained during the compilation process. the existing JavaScript library can be seamlessly used with CoffeeScript, and vice versa. the compiled code is readable and beautifying, and can be run in all JavaScript environments. It should be as fast or faster as the handwritten JavaScript.

Official Website: http://coffee-script.org/

Installation:

npm install -g coffee-script

Sass

What is Sass? This stuff simplifies css development and can be developed through attributes and other operations, and then generate css code.

To compile Sass, we need to use the Grunt build tool to compile it. At this time, we need to use the library:
Grunt-contrib-sass
To install Sass, follow these steps:

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

Execute the compilation command:

grunt sass

Of course, the sass command is needed here. This command depends on Ruby, so it must be installed in Ruby.
Command line:

// Release version gem install sass // if you want to install beta version gem install sass -- pre // if you want to install Git clone git from git repository of sass: // github.com/nex3/sass.gitcd sassrake install

Command Behavior for upgrading sass:

gem update sass

If the command succeeds, you can execute the following command:

sass -vsass -h

Of course, you may encounter:

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)

The reason is: https://rubygems.org/access in China may have problems.
The command we need to execute is:

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

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

Quick Start

Here I want to write, but found a write too much, or later have time to come back; if you are interested, you can look at the Grunt Quick Start: http://www.gruntjs.net/getting-started

Then I typed some CoffeeScript and Sass code to compile it. It's really good ~

========================================================== ======================
Author: 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
Reprinted please indicate the source: http://blog.csdn.net/qiujuer/article/details/48339139
-- Learning Open Source for open source; a beginner's mentality is shared with you!

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

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.