Yeoman Automatic Construction JS project (GO)

The zero-based NODEJS series article will show you how to benefit JavaScript as a server-side script through NODEJS Framework web development. The NODEJS framework is a V8-based engine and is the fastest JavaScript engine available today. The Chrome browser is based on V8, and opening 20-30 pages is a smooth one. The NODEJS Standard Web Development Framework Express helps us quickly build web sites that are more efficient than PHP and have a lower learning curve. Very suitable for small websites, personalization sites, our own Geek website!!

Objective
There is a technology that can improve our work efficiency, let us concentrate on doing what we are good at, can block the complexity, can standardize our architecture and our code, can let us enjoy programming fun. Yeoman can do it.

Many years ago, rails was just born with a new noun "scaffolding (scaffolding)" appearing. Scaffolding is synonymous with a tool to improve the efficiency of development. Subsequently, various programming languages began to implement their own "scaffolding" tool. Maven reconstructs the world of Java, changing the understanding of tens of millions of of developers about the construction of Java projects. Yeoman is doing the same thing in the JavaScript world.

Look at all kinds of tools, all kinds of languages, are in the leap-forward evolution. As a developer, I am pleasantly surprised by the changes every day!

Directory

1. Yeoman Introduction
2. Yeoman Kit yo command
3. Yeoman Toolkit yo– quickly build a Web project
4. Combination usage of the Yeoman Toolkit Bower,grunt

1. Yeoman Introduction

Yeoman was developed by a team of Google and external contributors, with the goal of grunt (a command-line tool for developing task Automation) and Bower (an HTML, CSS, Package Manager for front-end resources such as JavaScript and images creates an easy-to-use workflow for developers.

Yeoman has three main components: yo (scaffolding tool), Grunt (build tool), Bower (Package Manager). These three tools are independently developed separately, but need to be used together to achieve our efficient workflow patterns.

• Yo: In the second section of this article
• Grunt: Please refer to, grunt let Nodejs specification up
• Bower: Please refer to, Bower to solve JS's dependency management

2. Yeoman Kit yo command

Yo plugins are installed and managed through NPM, node. js Package Manager.

My system environment

• Win7 64bit
• nodejs:v0.10.5
• npm:1.2.19

~ D:\workspace\javascript>node -vv0.10.5~ D:\workspace\javascript>npm -v1.2.19

In the system, we have installed Nodejs and NPM. Win7 Installation Nodejs Please refer to the article: NODEJS Development Framework Express3.0 Development notes – from scratch

Global installation Yo

~ D:\workspace\javascript>npm install -g yo

If you have not installed Grunt,bower, you will need to install it together

~ D:\workspace\javascript>npm install -g grunt-cli bower

Then let's take a look at the yo Command line operation
1). View Help by helping

~ D:\workspace\javascript>yo --helpYeoman is a mask worn by the following members of the open-source community:  Paul Irish, Addy Osmani, Mickael Daniel, Sindre Sorhus, Eric Bidelman,  Frederick Ros, Brian Ford, Pascal Hartig, Stephen Sawchuk, and countless  other contributors.Usage: yo GENERATOR [args] [options]General options:  -h, --help     # Print generator‘s options and usage  -f, --force    # Overwrite files that already existPlease choose a generator below.Angular  angular:app  angular:common  angular:constant  angular:controller  angular:decorator  angular:directive  angular:factory  angular:filter  angular:main  angular:provider  angular:route  angular:service  angular:value  angular:viewKarma  karma:appMocha  mocha:app  mocha:generatorWebapp  webapp:app

Yo's command is simple: yo GENERATOR, for example: Yo WebApp, yo angular
Please choose a generator below: The following is a list of the generator libraries that have been installed in my system, for example: Angular,karma,mocha,webapp

2). Query Yo's support library

~ D:\workspace\javascript>yoYeoman is a mask worn by the following members of the open-source community:  Paul Irish, Addy Osmani, Mickael Daniel, Sindre Sorhus, Eric Bidelman,  Frederick Ros, Brian Ford, Pascal Hartig, Stephen Sawchuk, and countless  other contributors.[?] What would you like to do? (Use arrow keys) > Install a generator   Find some help   Get me out of here!

The command line prompts us for the action we want. Select "Install a generator" here

[?] What would you like to do? Install a generator[?] Search NPM for generators:web

The system continues to prompt us to find the package that we entered on the Web

3). Install the Generator-webapp Library

[?] Here‘s what I found. Install one? (Use arrow keys) > generator-armadillo   generator-bones   generator-btapp   generator-fe   generator-flight   generator-hazdev-webapp   generator-hbswebapp   generator-html5-site   generator-jing   generator-lessapp   generator-nodestrap   generator-sails   generator-server-configs   generator-starter   generator-starttter   generator-ultimate   generator-webapp   generator-webapp-bfytw   generator-webapp-fintan   generator-weblog   generator-website   Search again   Return home

Yo lists all the Web keyword-related packages that have been registered in the official, we choose "Generator-webapp"

Yo start downloading the Generator-webapp installation package via NPM

[?] What would you like to do? Install a generator[?] Search NPM for generators: web[?] Here‘s what I found. Install one? generator-webapp[email protected] D:\toolkit\nodejs\node_modules\generator-webapp├── [email protected] ([email protected], [email protected], [email protected], [email protected])└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], isbinaryfi[email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected].2.0, [email protected], [email protected], [email protected], [email protected])I just installed your generator by running:    npm install -g generator-webapp

Then we exit the YO command line and select "Get Me Out of here!"

[?] What would you like to do? Get me out of here!Bye from us! Chat soon.            Addy Osmani          Sindre Sorhus        Brian Ford     Eric Bidelman              Paul Irish     Mickael Daniel          Pasca1 Hartig      Stephen S.wchuk    Frederick R0s

Above the exit of the text is the developer's name, it is interesting that the vertical look at the most middle line of the text arrangement is, yeoman1.0, that is, yeoman the name of the project.

4). Note: The above procedure can also be used directly with the command

npm install -g generator-webapp

3. Yeoman Toolkit yo– quickly build a Web project

When we installed the Generator-webapp, we were able to build the project in a very elegant way.

1). Create the Nodejs-yo directory and build the WebApp project

~ D:\workspace\javascript>mkdir nodejs-yo~ D:\workspace\javascript>cd nodejs-yo~ D:\workspace\javascript\nodejs-yo>yo webapp     _-----_    |       |    |--(o)--|   .--------------------------.   `---------´  |    Welcome to Yeoman,    |    ( _´U`_ )   |   ladies and gentlemen!  |    /___A___\   ‘__________________________‘     |  ~  |   __‘.___.‘__ ´   `  |° ´ Y `Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.[?] What more would you like?  [ ] Twitter Bootstrap for Sass >[X] RequireJS  [X] Autoprefixer for your CSS

Explanation of the options:

• Twitter Bootstrap for Sass:sass is a CSS development tool that provides a number of handy formulations that save designers time and make CSS development easy and maintainable.
• Requirejs can help users asynchronously load JavaScript code on demand and address the dependencies between JavaScript modules, improving the overall quality and performance of front-end code.
• Autoprefixer parse the CSS file and add the browser prefix to the CSS rules, use the data of can I uses to determine which prefixes are needed.

The above 3 options, because Sass is based on Ruby, I did not install Ruby, cancel the Twitter Bootstrap for sass check.

2). View the installation log:

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.[?] What more would you like? RequireJS, Autoprefixer for your CSS   create Gruntfile.js   create package.json   create .gitignore   create .gitattributes   create .bowerrc   create bower.json   create .jshintrc   create .editorconfig   create app/favicon.ico   create app/404.html   create app/robots.txt   create app/.htaccess   create app/styles/main.css   create app/scripts/app.js   create app/scripts/main.js   create app/index.html   create app/scripts/hello.coffee   invoke   mocha:app   create     test\index.html   create     test\lib\chai.js   create     test\lib\expect.js   create     test\lib\mocha\mocha.css   create     test\lib\mocha\mocha.js   create     test\spec\test.jsI‘m all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.

The skeleton of the project has been built. A number of configuration files are also included. Gitignore,bower.json,gruntfile.js,favicon.ico, robots.txt,. htaccess. That's amazing, cool!!.

All of a sudden the equipment is complete, the war will be given to us.

4. Combination usage of the Yeoman Toolkit Bower,grunt

For Bower Introduction, please refer to: Bower to solve JS's dependency management
For grunt Introduction, please refer to: Grunt let Nodejs specification up

1). Use the Bower command to view project dependencies:

~ D:\workspace\javascript\nodejs-yo>bower listbower check-new     Checking for new versions of the project dependencies..nodejs-yo#0.0.0 D:\workspace\javascript\nodejs-yo├── jquery#1.9.1 (latest is 2.0.3)├── modernizr#2.6.2└── requirejs#2.1.8

We found that there are 4 dependent libraries in the generated WebApp, Jquery,modernizr,requirejs.

2). Perform unit tests using the grunt command

D:\workspace\javascript\nodejs-yo>grunt testRunning "clean:server" (clean) taskCleaning ".tmp"...OKRunning "concurrent:test" (concurrent) taskRunning "copy:styles" (copy) taskRunning "coffee:dist" (coffee) taskRunning "autoprefixer:dist" (autoprefixer) taskFile ".tmp/styles/main.css" created.Running "connect:test" (connect) taskStarting connect web server on localhost:9000.Running "mocha:all" (mocha) taskTesting: http://localhost:9000/index.html  .  1 test complete (107 ms)>> 1 passed! (0.11s)Done, without errors.

3). Start a node server with the grunt command

~ D:\workspace\javascript\nodejs-yo>grunt serverRunning "server" taskRunning "clean:server" (clean) taskRunning "concurrent:server" (concurrent) task    Warning: Running "compass:dist" (compass) taskWarning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue. Use --force to continue.    Aborted due to warnings.

When we started, we found an error. Because I don't have a ruby environment, Compass:dist's commands don't work.

Force start Grunt

~ D:\workspace\javascript\nodejs-yo>grunt Server--forced:\workspace\javascript\nodejs-yo>grunt Server--forceRunning "Server" taskrunning "Clean:server" (Clean) taskcleaning ". tmp" ... Okrunning "Concurrent:server" (concurrent) taskrunning "coffee:dist" (coffee) Task warning:running "compass:dist" (com Pass) Taskwarning:you need to has Ruby and Compass installed and in your system PATH for this task to work. More info:https://ithub.com/gruntjs/grunt-contrib-compass with--force to continue. Used--force, continuing.  Running "Compass:dist" (compass) taskwarning:you need to having Ruby and compass installed and your system PATH for this Task to work. More info:https://ithub.com/gruntjs/grunt-contrib-compass with--force to continue. Running "Copy:styles" (copy) taskrunning "Autoprefixer:dist" (autoprefixer) taskfile ". Tmp/styles/main.css" created. Running "Connect:livereload" (connect) taskstarting Connect Web server on localhost:9000.running "Open:server" (Open) Tas krunning "Watch" taskwaiting ...

The background log shows the "Watch" task, which indicates that the code file is monitored and that the modified Web page is automatically updated.

Browser is opened automatically, Http://localhost:9000/

4). Modify the app/index.html code to increase the check of the canvas.

~ vi app/index.html<script>window.onload = function () {if (canvasSupported()) {alert(‘canvas supported‘);}};function canvasSupported() {var canvas = document.createElement(‘canvas‘);return (canvas.getContext && canvas.getContext(‘2d‘));}</script>

Browser display:

5). Add Library Jquery-pjax via Bower

~ D:\workspace\javascript\nodejs-yo>bower Install jquery-pjaxbower jquery-pjax#* not-cached git://github.com/de Funkt/jquery-pjax.git#*bower jquery-pjax#* Resolve Git://github.com/defunkt/jquery-pjax.git#*bower jquery-pjax# * Download Https://github.com/defunkt/jquery-pjax/archive/v1.7.3.tar.gzbower jquery-pjax#* extract AR              Chive.tar.gzbower jquery-pjax#* resolved Git://github.com/defunkt/jquery-pjax.git#1.7.3bower jquery#>=1.8 Cached Git://github.com/components/jquery.git#2.0.3bower jquery#>=1.8 validate 2.0.3 against git:/ /github.com/components/jquery.git#>=1.8bower jquery-pjax#~1.7.3 Install jquery-pjax#1.7.3jquery-pjax#1.7.3 app\     bower_components\jquery-pjax└──jquery#2.0.3~ D:\workspace\javascript\nodejs-yo>bower Listbower check-new Checking for new versions of the project dependencies. nodejs-yo#0.0.0 d:\workspace\javascript\nodejs-yo├──jquery#1.9.1 (Latest is 2.0.3) ├─┬jquery-pjax#1.7.3 extraneous│└──jquery#1.9.1 (2.0.3 available) ├──modernizr#2.6.2└──requirejs#2.1.8 

Yeoman has successfully helped us to build a prototype of a project, and then we can build a skeleton template of our own, and publish it to the generator library of Yeoman, for our own project, our familiar framework portfolio.

The later content will be more exciting, please look forward to ...!!

Reprint please specify the source:
http://blog.fens.me/nodejs-yeoman-intro/

Yeoman Automatic Construction JS project (GO)