node. JS Toolset Bower,yeoman,grunt

Recently saw an article on Javacodegeeks node, Grunt, Bower and yeoman–a modern Web dev ' s Toolkit, this article describes a Web development toolset. It's just that I've been using this toolset to develop Web applications, and I've been trying to write an article summarizing the usage of this development kit, taking this opportunity to take a look at this article and summarize my experience with this tool.
In the article, the author uses the angular framework to develop, and I, following the company's choice, uses ember.js as my development framework. Use Compass for SCSS compilation at the same time. These places will be different.

Node

Like node. js, it's not a new thing anymore. The first version of node. JS was released in 2009, and many companies now use node as the back-end development tool. There is still a big debate as to whether node. JS represents an advanced development direction. But the ecosystem based on node. JS has formed, and a big wave of excellent node. JS modules have sprung up. But like Grunt, Bower and other tools, but also a lot of friends do not understand. So this article specifically introduces them.

node. JS is an event-driven I/O server-side JavaScript environment based on the Google V8 engine. The purpose is to provide the authoring of extensible network programs, such as Web services. The first version was released by Ryan Dahl in 2009, and later, Joyent hired Dahl and helped develop node. js. Similar development environments for other programming languages, including twisted to Python,perl Object environment to Perl,libevent in C, and Eventmachine to Ruby. Unlike general JavaScript, node. JS is not running on a Web browser, but is a JavaScript server-side JavaScript that runs on the servers. Or you can use Node-webkit to create a desktop application.

The node. JS Community has created many good node module, which are published in Npmjs.org. There are now around 100,000 modules available for use. The power of the community cannot be underestimated. Instead of using node. js to develop server programs, this document uses the node. JS modules to assist in the development of our front-end programs. In particular, the use of NPM to install some popular modules such as grunt.

The official website provides installation programs on various operating systems, 32-bit/64-bit machines. also provides the source code. The installation is very simple. Once the installation is successful, you can $ node -v view the version of node. js. When installing node. js, it is common to install NPM at the same time. Perform npm -v a review of NPM versions. With NPM, you can install the required node. JS modules, such as:

1	NPM Install Grunt

NPM Install installs the latest or specific modules from npmjs.org, and can be installed either locally or on a server such as GitHub. The installed module is placed in the current node_modules folder. For commonly used modules, such as grunt, you can put it in a global folder. So other projects will not have to install this dependency.

1	NPM Install Grunt-g

The best way is to create a package.json file. Manage the node. JS modules required for your project in this file. Performing npm init a prompt answer will automatically create one package.json . If you want to add a module, such as a grunt. Execution npm install grunt --save will automatically update the package.json file.

123456

{... "devdependencies": {"grunt": "^0.4.5"}}

The npm install grunt --save-dev file is also updated automatically by execution package.json . It adds the module to devDependencies the middle. When devDependencies used only at development time, the module is not deployed to the published application. npm uninstall --save gruntthe command is to unload the module. The NPM Package management tool uses semantic Versioning. This version of the program is very powerful and provides very rich semantics through a string. You can have a good read on its website.

1.3.5,,,,, ~1.3.5 1.3.x ^1.3.5 latest * are valid version numbers.

A reference manual for the NPM command line tool can be found here

Bower

As mentioned earlier, NPM is a package management tool for node. js. In web development, we often use bootstrap, jquery, these CSS, the front-end JavaScript framework. How do you manage these frameworks in our projects? Include introduction, check dependencies, updates, deletions? This will use another good tool: Bower.

Web sites is made of lots of things-frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

To install Bower with NPM:

1	NPM Install-g Bower

bower install <package>install dependencies by command:

12345678

# RegisteredPackage Bower install jquery# GitHub shorthandBower install Desandro/masonry# Git EndpointBower install Git://github.com/user/package.git# URLBower Install Http://example.com/script.js

You can bower init manage dependencies by initializing a bower.json file. You can configure Bower by using the root directory .bowerrc . Here's a good article about bower.

StackOverflow has a comparison of Bower and NPM.

Yeoman

Yeoman is a scaffolding tool that can be conveniently generated for you with an initial project, standard folder layout, standard package dependencies, and initial page examples. Yeoman offers to be happy to generators build different projects.
generatorsSome of these are provided by the authorities and some are provided by the community.

The Web ' s scaffolding tool for modern WebApps

What good does it have?

• You can quickly create a project. The so-called everything at the beginning of difficult, Yemoman help you difficulty. Yemoman help you set up the project, the related files, the corresponding dependencies, these things would have cost you a considerable amount of energy and time
• You can impersonate an expert, although you may not be familiar with all of these tools. Of course, you have confidence in yourself, and you can adjust what yeoman generates as needed. That's for sure. Yeoman just provides you with the most basic architecture.
• You can learn a lot of new knowledge. I have deep experience. Basically, I'm a back-end development engineer, and the front end is not my forte. But Yeoman helped me to understand a lot of things, such as scss and so on.

Yeoman has a Chinese community.

Installing the Yeoman is simple and takes advantage of the previous npm tools.

1	NPM Install-g yo

Choose a generator , if you want to base on angular , use npm install -g generator-angular , if you want to use Ember, use

12345

NPM install-g generator-embermkdir myemberapp && CD Myemberapp (the directory' s name is your application ' s Name)yo embernpm install-g grunt-mochagrunt serve

The official documentation provides a detailed introduction.

Grunt

Grunt is a task-based command-line build tool that is provided for JavaScript projects. Like the Java industry's ant tools. Grunt runs on the node. JS platform and is installed via NPM. It consists of two components: grunt-cli and grunt .

Installation is simple:

12	NPM install-g grunt-clinpm install-g Grunt

You need to provide a Gruntfile.js file, just like Ant needs a build.xml file. The initial file is simple:

123	Module.exports = function (grunt) {//Do grunt-related things in here};

Grunt exposes its methods and properties through the grunt parameter. Grunt has a lot of modules. These modules can be npm installed by the installation. Under normal circumstances, their names will be grunt- prefixed. The official provided module prefixes are grunt-contrib , for example grunt-contrib-uglify .

1	NPM Install--save-dev grunt-contrib-uglify

I'm getting the feeling that this thing is very much like Apache ant; domestic has a very good grunt Chinese website, can more convenient to understand and learn grunt.

Compass

When you use Yo to build a ember project, you need to use compass to compile the scss file. The project uses SCSS as the CSS framework.
You can learn more about it on the website. Basically scss and less are the two most popular CSS processing frameworks.

So you need to install Ruby. At the same time will put gem on the installation. gemis Ruby's package management tool, just like NPM for node. js.
Then install Compass:

12	Gem Update--systemgem Install Compass

this way you can compile your project properly. Here is a background management project generated from the above steps. ember-lance

node. JS Toolset Bower,yeoman,grunt