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
- Yeoman Introduction
- Yeoman Kit yo command
- Yeoman Toolkit yo– quickly build a Web project
- 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 -v
v0.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)