最近看到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