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