Node.js工具集 bower,yeoman,grunt

      最近看到javacodegeeks上的一篇文章Node, Grunt, Bower and Yeoman – A Modern web dev’s Toolkit， 文章介紹了一個web開發的工具集。 正好我今年以來也在使用這套工具集開發Web應用程序，也一直想寫一篇文章總結一下這套開發套件的用法，藉此機會，參考這篇文章，總結一下我使用這套工具的經驗。
在的文章中，做者使用angular框架開發，而我，遵循公司的選擇，使用Ember.js做爲個人開發框架。同時使用Compass進行SCSS的編譯。這些地方會有所不一樣。

Node

     像Node.js， 已經不算新鮮的玩意了。Node.js第一個版本於2009年發佈，如今有不少的公司也採用Node做爲後端開發工具。 至於Node.js是否表明先進的開發方向， 目前還有很大的爭論。可是基於Node.js的生態圈已經造成，一大波的優秀的的Node.js 模塊已經涌現。可是像Grunt, Bower等工具，也有很多的朋友並不瞭解。因此這篇文章特別介紹一下它們。

      Node.js 是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎。目的是爲了提供撰寫可擴展網絡程序，如Web服務。第一個版本由Ryan Dahl於2009年發佈，後來，Joyent僱用了Dahl，並協助發展Node.js。其餘編程語言的相似開發環境，包含Twisted於Python，Perl Object Environment於Perl，libevent於C，和EventMachine於Ruby。與通常JavaScript不一樣的地方，Node.js並非在Web瀏覽器上運行，而是一種在服務器上運行的Javascript服務端JavaScript。或者你可使用node-webkit建立桌面應用程序。

     Node.js社區建立了許許多多的優秀的node module，這些module發佈在npmjs.org。 目前已經有10萬左右形形色色的模塊可供使用。社區的力量不容小覷。這篇文檔並不會介紹使用Node.js去開發服務器程序， 而是利用Node.js 這些模塊輔助咱們前端程序的開發。 特別是利用npm安裝一些流行的模塊如Grunt等。

     官方網站提供了各類操做系統, 32位/64位機器上的安裝程序。 還提供了源碼。 安裝很是的簡單。一旦安裝成功，你能夠經過$ node -v查看Node.js的版本。在安裝Node.js的時候，通常會同時將npm也安裝上了。 執行npm -v查看npm的版本。經過npm能夠安裝所需的Node.js模塊， 如:

1	npm install grunt

 npm install能夠從npmjs.org安裝最新的或者特定的模塊， 也能夠從本地或者服務器如github上安裝。 安裝的模塊放在了當前的node_modules文件夾中。對於經常使用的模塊，如grunt，你能夠把它放在全局的文件夾中。 這樣其它的項目就不用安裝這個依賴了。

1	npm install grunt -g

最好的方式是建立一個package.json文件。在這個文件中管理你的項目須要的Node.js模塊。執行npm init根據提示回答後會自動建立一個package.json。若是你想加入一個模塊， 如grunt。執行npm install grunt --save會自動更新package.json文件。

1 2 3 4 5 6

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

而執行npm install grunt --save-dev也會自動更新package.json文件。它會將模塊加到devDependencies中。在devDependencies只在開發的時候用，模塊不會部署到發佈的應用程序中。命令npm uninstall --save grunt是卸載模塊。npm包管理工具使用Semantic Versioning。 這個程序版本規範很是的強大， 經過一個字符串能夠提供很是豐富的語義。你能夠到其網站好好閱讀一下。

1.3.5, ~1.3.5, 1.3.x, ^1.3.5, latest, *都是合法的版本號。

npm命令行工具的參考手冊能夠看這裏

Bower

前面講到，npm是Node.js的包管理工具。 在Web開發中，咱們常常會用到bootstrap， JQuery這些CSS, 前端javascript框架。 如何在咱們的項目中管理這些框架？ 包括引入，檢查依賴， 更新，刪除？這將會用到另一個很好的工具: Bower。

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

使用npm安裝bower:

1	npm install -g bower

 經過命令bower install <package>安裝依賴：

1 2 3 4 5 6 7 8

# registered package bower install jquery # GitHub shorthand bower install desandro/masonry # Git endpoint bower install git://github.com/user/package.git # URL bower install http://example.com/script.js

你能夠經過bower init初始化一個bower.json文件來管理依賴。你能夠經過經過根目錄的.bowerrc來配置bower。這裏有一篇關於bower的好的文章

stackoverflow有一篇關於bower和npm的對比。

Yeoman

Yeoman是一個腳手架工具，能夠方便的爲你產生一個初始項目， 標準的文件夾佈局， 標準的包依賴， 初始的頁面例子。 Yeoman提供樂意一些generators， 用來生成不一樣的項目。
這些generators有些由官方提供，有些由社區提供。

The web’s scaffolding tool for modern webapps

它有什麼好處呢？

• 能夠快速建立一個項目。正所謂萬事開頭難， yemoman幫你度難關。 Yemoman幫你設置好了項目， 相關的文件，相應的依賴，這些事情原本會耗費你至關大的精力和時間
• 你能夠冒充一個專家，儘管你可能並不所有熟悉這些所有工具。 固然，你對本身頗有信心，也能夠根據須要調整yeoman生成的東西。 這是確定的。 yeoman只是給你提供了最基礎的架構。
• 你能夠學習到不少新知識。 筆者深有體會。 基本上講，我是一個後端開發工程師， 前端並非個人強項。 可是yeoman幫我瞭解了不少的東西，如Scss等。

yeoman有個中文社區。

安裝yeoman很簡單，利用前面的npm工具。

1	npm install -g yo

 選擇一個generator, 若是你想基於angular,就用npm install -g generator-angular， 若是你想用Ember,就用

1 2 3 4 5

npm install -g generator-ember mkdir myemberapp && cd myemberapp(The directory's name is your application's name) yo ember npm install -g grunt-mocha grunt serve

 官方文檔提供了詳細的介紹。

Grunt

Grunt是爲Javascript項目提供的一個基於任務的命令行構建工具。 相似Java業界的Ant工具同樣。Grunt運行在Node.js平臺之上， 經過npm安裝。 它包含兩個組件： grunt-cli和grunt。

安裝很簡單：

1 2	npm install -g grunt-cli npm install -g grunt

你須要提供一個Gruntfile.js文件，就像Ant須要build.xml文件同樣。初始文件很簡單：

1 2 3

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

Grunt經過grunt參數暴露了它的方法和屬性。Grunt有很是多的模塊。這些模塊能夠經過npm進行安裝。 正常狀況下它們的名字都會以grunt-爲前綴。 官方提供的模塊的前綴是grunt-contrib， 如grunt-contrib-uglify。

1	npm install --save-dev grunt-contrib-uglify

我愈來愈感受這玩意特別像Apache Ant了;國內有一個很好的Grunt中文網站，能夠更方便的瞭解和學習Grunt。

Compass

當使用yo 生成一個Ember的項目時， 須要使用compass來編譯scss文件。 項目使用scss做爲css框架。
你能夠到其網站上了解更多的內容。 基本上Scss和less最流行的兩大CSS處理框架。

 

因此你須要安裝Ruby。 同時會把gem安裝上。 gem是Ruby的包管理工具， 就像npm之於node.js。
而後安裝compass:

1 2	gem update --system gem install compass

這樣你就能正常編譯你的項目了。這裏有一個根據以上步驟生成的後臺管理項目。Ember-Lance