前端开发
by smallnest

Web开发利器:介绍一款快速开发套件 (Node, Grunt, Bower和Yeoman)

目录 [−]

  1. Node and NPM
    1. 安装node
  2. Bower
  3. Yeoman
  4. Grunt
    1. 安装
  5. Compass

最近看到javacodegeeks上的一篇文章Node, Grunt, Bower and Yeoman – A Modern web dev’s Toolkit， 文章介绍了一个web开发的工具集。 正好我今年以来也在使用这套工具集开发Web应用程序，也一直想写一篇文章总结一下这套开发套件的用法，借此机会，参考这篇文章，总结一下我使用这套工具的经验。
在的文章中，作者使用angular 框架开发，而我，遵循公司的选择，使用Ember.js作为我的开发框架。同时使用Compass进行SCSS的编译。这些地方会有所不同。

像Node.js， 已经不算新鲜的玩意了。Node.js第一个版本于2009年发布，现在有很多的公司也采用Node作为后端开发工具。 至于Node.js是否代表先进的开发方向， 目前还有很大的争论。但是基于Node.js的生态圈已经形成，一大波的优秀的的Node.js 模块已经涌现。但是像Grunt, Bower等工具，也有不少的朋友并不了解。所以这篇文章特别介绍一下它们。

Node and NPM

Node.js
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 is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
nodejs.org

npm
Node.js社区创建了许许多多的优秀的node module，这些module发布在npmjs.org。 目前已经有10万左右形形色色的模块可供使用。社区的力量不容小觑。

这篇文档并不会介绍使用Node.js去开发服务器程序， 而是利用Node.js 这些模块辅助我们前端程序的开发。 特别是利用npm安装一些流行的模块如Grunt等。

安装node

官方网站提供了各种操作系统, 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是一个脚手架工具，可以方便的为你产生一个初始项目， 标准的文件夹布局， 标准的包依赖， 初始的页面例子。 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

Compass
当使用yo 生成一个Ember的项目时， 需要使用compass来编译scss文件。 项目使用scss作为css框架。

你可以到其网站上了解更多的内容。 基本上Scss和less最流行的两大CSS处理框架。

Compass is an open-source CSS Authoring Framework.

所以你需要安装Ruby。 同时会把gem安装上。 gem是Ruby的包管理工具， 就像npm之于node.js。
然后安装compass:

1
2
gem update --system
gem install compass

这样你就能正常编译你的项目了。

这里有一个根据以上步骤生成的后台管理项目。
Ember-Lance
Ember-Lance