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