從零開始nodejs系列文章，將介紹如何利Javascript作爲服務端腳本，經過Nodejs框架web開發。Nodejs框架是基於V8的引擎，是目前速度最快的Javascript引擎。chrome瀏覽器就基於V8，同時打開20-30個網頁都很流暢。Nodejs標準的web開發框架Express，能夠幫助咱們迅速創建web站點，比起PHP的開發效率更高，並且學習曲線更低。很是適合小型網站，個性化網站，咱們本身的Geek網站！！javascript
關於做者css
- 張丹(Conan), 程序員Java,R,PHP,Javascript
- weibo：@Conan_Z
- blog: http://blog.fens.me
- email: bsspirit@gmail.com
轉載請註明出處：
http://blog.fens.me/nodejs-yeoman-intro/
html
前言
有一種技術能夠提升咱們的工做效率，可讓咱們專心作咱們擅長的事，能夠屏蔽複雜性，能夠規範咱們的架構和咱們的代碼，可讓咱們的享受編程的樂趣。Yeoman能夠作到。前端
不少年之前，rails剛剛出世，伴隨着一個新的名詞「腳手架(scaffolding)」出現了。腳手架是一種提升開發效率的工具的代名詞。隨後，各類編程語言都開始實現本身的「腳手架」工具。Maven從新構造了Java的世界，改變了幾千萬的開發者對於Java項目構建的認識。Yeoman在Javascript領域正作着一樣的事情。html5
看着各類工具，各類語言，都在飛躍式的進化。作爲一個開發者，我天天都在爲變化而驚喜！java
目錄node
- Yeoman介紹
- Yeoman工具包yo命令
- Yeoman工具包yo – 快速構建一個web項目
- Yeoman工具包bower,grunt的組合用法
1. Yeoman介紹
Yeoman是Google的團隊和外部貢獻者團隊合做開發的，他的目標是經過Grunt（一個用於開發任務自動化的命令行工具）和Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝爲開發者建立一個易用的工做流。jquery
Yeoman主要有三部分組成：yo（腳手架工具）、grunt（構建工具）、bower（包管理器）。這三個工具是分別獨立開發的，可是須要配合使用，來實現咱們高效的工做流模式。git
- yo：在本文中第二節會講到
- grunt：請參考，grunt讓Nodejs規範起來
- bower：請參考，bower解決js的依賴管理
2. Yeoman工具包yo命令
yo插件都是經過npm, Node.js包管理器安裝和管理的.程序員
個人系統環境
- win7 64bit
- Nodejs:v0.10.5
- Npm:1.2.19
~ D:\workspace\javascript>node -v v0.10.5 ~ D:\workspace\javascript>npm -v 1.2.19
在系統中，咱們已經安裝好了Nodejs和npm。win7安裝nodejs請參考文章：Nodejs開發框架Express3.0開發手記–從零開始
全局安裝yo
~ D:\workspace\javascript>npm install -g yo
若是你尚未安裝grunt,bower，也須要一塊兒安裝
~ D:\workspace\javascript>npm install -g grunt-cli bower
接下咱們看一下yo命令行操做
1). 經過help查看幫助
~ D:\workspace\javascript>yo --help Yeoman 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 exist Please 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:view Karma karma:app Mocha mocha:app mocha:generator Webapp webapp:app
yo的命令很簡單：yo GENERATOR，例如：yo webapp， yo angular
Please choose a generator below: 下面列出了個人系統中，已經安裝的generator的庫，例如：Angular，Karma，Mocha，Webapp
2). 查詢yo的支持庫
~ D:\workspace\javascript>yo Yeoman 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!
命令行會提示，咱們想要的操做。這裏選擇」Install a generator」
[?] What would you like to do? Install a generator [?] Search NPM for generators:web
系統繼續提示，咱們要查找的包，咱們輸入web
3). 安裝generator-webapp庫
[?] 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列出了，全部在官方已經註冊的，web關鍵字相關的包，咱們選擇「generator-webapp」
yo經過npm開始下載generator-webapp安裝包
[?] What would you like to do? Install a generator
[?] Search NPM for generators: web
[?] Here's what I found. Install one? generator-webapp
generator-webapp@0.2.7 D:\toolkit\nodejs\node_modules\generator-webapp
├── cheerio@0.12.1 (entities@0.3.0, underscore@1.4.4, htmlparser2@3.1.4, cheerio-select@0.0.3)
└── yeoman-generator@0.12.3 (dargs@0.1.0, diff@1.0.5, debug@0.7.2, async@0.2.9, mime@1.2.11, mkdirp@0.3.5, isbinaryfi
le@0.1.9, underscore.string@2.3.3, shelljs@0.1.4, iconv-lite@0.2.11, lodash@1.3.1, rimraf@2.1.4, nopt@2.1.2, cli-table@0
.2.0, tar@0.1.18, glob@3.2.6, inquirer@0.2.4, request@2.21.0)
I just installed your generator by running:
npm install -g generator-webapp
而後，咱們退出yo命令行，選擇「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
上面的退出的文字是開發者的名字，頗有意思一點是，豎着看最中間一行的文字排列是，yeoman1.0，也就是yeoman這個項目的得名了。
4). 注：上面的過程，也能夠直接用命令
npm install -g generator-webapp
3. Yeoman工具包yo – 快速構建一個web項目
當咱們安裝了generator-webapp後，咱們就能夠，以很是優雅的方式來構建工程了。
1). 建立nodejs-yo目錄，並構建webapp工程
~ 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
對選項的解釋：
- Twitter Bootstrap for Sass：SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。
- RequireJS 能夠幫助用戶異步按需的加載 JavaScript 代碼，並解決 JavaScript 模塊間的依賴關係，提高了前端代碼的總體質量和性能。
- Autoprefixer解析CSS文件而且添加瀏覽器前綴到CSS規則裏，使用Can I Use的數據來決定哪些前綴是須要的。
上面3個選擇，因爲Sass是基於Ruby的，我本機沒有安裝ruby，取消Twitter Bootstrap for Sass的勾選。
2). 查看安裝日誌：
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.js I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.
項目骨架已經建好了。還包括了不少的配置文件.gitignore,bower.json,Gruntfile.js,favicon.ico, robots.txt, .htaccess。太神奇了，Cool!!
一會兒裝備都齊全了，打仗的事就交給咱們本身吧。
4. Yeoman工具包bower,grunt的組合用法
有關bower的介紹，請參考：bower解決js的依賴管理
有關grunt的介紹，請參考：grunt讓Nodejs規範起來
1). 使用bower命令查看項目依賴：
~ D:\workspace\javascript\nodejs-yo>bower list bower 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
咱們發現生成的webapp中，有4個依賴庫，jquery,modernizr,requirejs。
2). 使用grunt命令執行單元測試
D:\workspace\javascript\nodejs-yo>grunt test Running "clean:server" (clean) task Cleaning ".tmp"...OK Running "concurrent:test" (concurrent) task Running "copy:styles" (copy) task Running "coffee:dist" (coffee) task Running "autoprefixer:dist" (autoprefixer) task File ".tmp/styles/main.css" created. Running "connect:test" (connect) task Starting connect web server on localhost:9000. Running "mocha:all" (mocha) task Testing: http://localhost:9000/index.html . 1 test complete (107 ms) >> 1 passed! (0.11s) Done, without errors.
3). 使用grunt命令啓動一個node服務器
~ D:\workspace\javascript\nodejs-yo>grunt server
Running "server" task
Running "clean:server" (clean) task
Running "concurrent:server" (concurrent) task
Warning: Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://g
ithub.com/gruntjs/grunt-contrib-compass Use --force to continue. Use --force to continue.
Aborted due to warnings.
啓動時，咱們發現報錯了。因爲我沒有裝Ruby的環境，因此compass:dist的命令不能運行。
強制啓動grunt
~ D:\workspace\javascript\nodejs-yo>grunt server --force
D:\workspace\javascript\nodejs-yo>grunt server --force
Running "server" task
Running "clean:server" (clean) task
Cleaning ".tmp"...OK
Running "concurrent:server" (concurrent) task
Running "coffee:dist" (coffee) task
Warning: Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://
ithub.com/gruntjs/grunt-contrib-compass Use --force to continue. Used --force, continuing.
Running "compass:dist" (compass) task
Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://
ithub.com/gruntjs/grunt-contrib-compass Use --force to continue.
Running "copy:styles" (copy) task
Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.
Running "connect:livereload" (connect) task
Starting connect web server on localhost:9000.
Running "open:server" (open) task
Running "watch" task
Waiting...
後臺日誌顯示了「watch」的task，說明代碼文件被監控着，若有修改網頁會自動更新。
瀏覽器被自動打開，http://localhost:9000/
4). 修改app/index.html代碼，增長對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>
瀏覽器顯示：
5). 經過bower增長庫jquery-pjax
~ D:\workspace\javascript\nodejs-yo>bower install jquery-pjax bower jquery-pjax#* not-cached git://github.com/defunkt/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.gz bower jquery-pjax#* extract archive.tar.gz bower jquery-pjax#* resolved git://github.com/defunkt/jquery-pjax.git#1.7.3 bower jquery#>=1.8 cached git://github.com/components/jquery.git#2.0.3 bower jquery#>=1.8 validate 2.0.3 against git://github.com/components/jquery.git#>=1.8 bower jquery-pjax#~1.7.3 install jquery-pjax#1.7.3 jquery-pjax#1.7.3 app\bower_components\jquery-pjax └── jquery#2.0.3 ~ D:\workspace\javascript\nodejs-yo>bower list bower 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已經成功地幫助咱們打造出一個項目的原型了，接下來咱們能夠針對本身的項目，本身熟悉的框架組合，構建一個屬於本身的骨架模板，併發布到Yeoman的generator庫中。
後面的內容會更精彩，敬請期待…！！