如何优雅的构建一个 Web Site

最近做了几个小的项目介绍 Portal,特点是简单全静态,本来没有什么难的,但如果真正的项目就牵扯到第三方JS库的管理,版本控制,部署就要牵扯到 JS,CSS 的压缩合并,和最终生成静态文件的分发。

预期效果

  • 快速生成项目结构
  • 帮助管理项目引用
  • 开发模式下 JS, CSS 直接引用
  • 预发布时,将J S, CSS 压缩合并,同时替换 html 中的引用路径。
  • 预发布后,将合并压缩后的文件集放到一个目录中,然后 commit 到另一个 Deploy 分支中。
  • 发布时,在 Remote 中设置发布分支为 Deploy,即可。

明确了所有的流程,开始找工具,Web这几年在 Node.js 的发展下,早已有了完整的生态链。

工具集

  • YEOMAN 它有一堆的模板,可以帮你快速的生成项目,最后还可以对发布进行管理,比如说将生成的代码放到dist目录,最后commit到Deploy分支。
  • Bower 包管理器,类似于Ruby中的Bundler,帮助管理第三方的库
  • Grunt.js 类似于rake的构建工具,可以用它来调度其它js库压缩合并js, css.
  • 其它的小工具库

快速项目创建流程

1. 安装 Node.js

1
2
3
4
$ brew install node
# 更新npm
$ npm install -g npm@latest

2. 通过 YEOMAN 快速创建项目

将YEOMAN 安装到全局环境中:

1
2
3
4
$ npm install -g yo bower grunt-cli
# 查看版本
$ yo --version && bower --version && grunt --version

YEOMAN 是一个生成工具,它依赖生成模板,但它本身不包含生成模板,所以要自行添加 Generator 模板:

1
2
$ npm install -g generator-webapp
# webapp 模板中包含了 HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap。

3. 创建新项目

1
2
$ mkdir yo-project
$ yo webapp

项目结构(很优雅):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.
├── Gruntfile.js
├── bower.json
├── package.json
├── .jshintrc
├── .yo-rc.json
├── app
│   ├── favicon.ico
│   ├── images
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   └── styles
├── bower_components
│   ├── bootstrap
│   ├── jquery
│   └── modernizr
└── node_modules
    ├── grunt
    └── jshint-stylish

4. 项目建好后,可以开始预览了:

1
$ grunt serve

这时,浏览器应会自动打开 9000 端口,看到 'Allo, 'Allo!,表示一切就绪。

Bower - 添加管理第三方库

项目已经成功了,但如果要使用其它更多的第三方引用,一定记得用Bower:

关于Bower,许久前介绍过一次,不过当时并不感冒,直到遇见YEOMAN,话说是Bower给YO的机会。

用法很简单:

1
2
3
4
5
# 查询你要使用的库信息
$ bower search bootstrap
# 下载安装 bootstart 并将其配置到 bower.json
$ bower install bootstrap --save

使用 Grunt.js 构建开发流程

刚刚已经通过运行grunt serve来启动预览,YO除了grunt还同时配置了一堆的Grunt.js相关的插件来帮助构建开发流程。

1
2
3
4
5
6
7
8
9
10
11
12
$ grunt serve
# 项目在生成时是有test目录的(简化时给删了),可以很方便的写自动化测试脚本,然后运行。
$ grunt test
# 生成Production环境代码
$ grunt
# 所以一般的流程是这样子嘀:
$ grunt serve
$ grunt test
$ grunt

Deploy

Grunt.js 本身是一个工具,可以方便的自定义脚本实现发现,但YO也给我们提供了一套解决方案:grunt-build-control

构建生产环境的代码

1
$ grunt build

默认配置将代码放在 dist 目录,生成的最终结果如下:(合并,压缩都做了,美!!!)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ tree -L 3 dist
dist
├── 6df2b309.favicon.ico
├── fonts
├── index.html
├── robots.txt
├── scripts
│   ├── 147cb910.plugins.js
│   ├── b6c3df09.main.js
│   ├── bcac3e9e.vendor.js
│   └── vendor
│   └── fbe20327.modernizr.js
└── styles
├── 7edfd143.vendor.css
└── a5896f90.main.css

将dist发布到新的分支

通过 Git 的 subtree 命令将dist目录发布到 remote origin deploy 分支上。

1
$ git subtree push --prefix dist origin deploy

成功

REF::

图片源: