将 Subversion 与 Adobe Dreamweaver CS5 结合使用

2008 年推出 Dreamweaver CS4 后，Adobe 引入了对 Subversion 版本控制系统 (VCS) 的支持。推出 Dreamweaver CS5 后，Adobe 继续为 Web 设计人员和开发人员提供 VCS 带来的所有优势，这些优势一直以来得到更传统的代码开发人员的认可和青睐，但更新了对 Subversion 1.6.6 客户端库的支持并新增了几个功能，包括在 VCS库中更简单的文件提交和还原方式。

Adobe 支持这一功能旨在改善 Dreamweaver 用户的工作情况。设计人员/开发人员不必再使用一个图形用户界面 (GUI) 进行 Web 开发，使用另一个 GUI 管理他们的 VCS。这一集成显著改善了设计人员/开发人员的工作流程。

注意：Dreamweaver CS5 与 Subversion 集成并不能作为一个全功能的 Subversion 客户端。虽然 Dreamweaver CS5 不提供其他 Subversion 客户端提供的所有高级功能，但它使 Dreamweaver 用户能将 Subversion 集成到日常工作流程中。

这是三部文章系列的第 1 部分，我将通过这个系列说明为什么设计人员/开发人员会发现 Subversion 如此实用以及如何将 VCS 使用集成到他们的现有工作流程中。首先，我将侧重于一些基本的 VCS 概念以及使用这类工具的原因。稍后，我会说明如何将 Subversion 集成到工作流程中。在第 2 部分中，我会说明如何将 Dreamweaver CS5 配置为使用 Subversion 库；在第 3 部分中，我会说明如何创建您自己的库。

如果已经熟悉 VCS 概念，您可以转至第 2 部分：将 Dreamweaver CS5 配置为使用 Subversion。

什么是 Subversion 和版本控制？

Subversion (SVN) 是目前可用的多款商业和开放源代码版本控制系统 (VCS) 之一。自问世以来，它得到了广泛应用，并提供一款出色的 VCS 或不可缺的许多功能。Subversion 软件运行于服务器上，该服务器提供一个库，供开发人员存储源代码和配置文件等关键数据。与标准的文件系统不同，VCS 跟踪对每个文件所做的更改，使用户能跟踪更改情况并恢复到任何文件的先前版本。它还允许多个开发人员使用分支、合并和标记在一个更复杂的开发流程中互动。

Subversion 由 CollabNet 开发小组发起，该小组与开放源代码社区一起继续支持它。它已发布，供大众根据 Apache 许可证进行使用。Subversion 网站提供该软件及其源代码的免费下载和安装。包括 Mac OS X 10.6 和许多 Linux 变体在内的许多平台预装该软件。Dreamweaver CS5 用户无需下载或安装 Subversion 客户端，因为 Dreamweaver CS5 可以作为 Subversion 库的客户端。

Subversion 并不是公用域中唯一可用的 VCS。其他经典的开放源代码系统包括 Revision Control System (RCS) 和 Concurrent Versions System (CVS)。如果您对商业应用程序感兴趣，可查看 Perforce 和 Microsoft Visual SourceSafe 等产品。截至撰写本文时，Subversion 是 Dreamweaver CS5 只支持 VCS。

基本 VCS 概念

无论属于 Web 设计/开发小组还是个人 Web 设计人员/开发人员，您考虑 VCS 时主要出于几个原因。我在这两种环境中都用过 VCS 并发现优势远远超出将 Subversion 集成到工作流程所需的额外工作。

注意：Dreamweaver CS5 和 Subversion 在 VCS 概念方面所使用的术语不同。在本文的其余部分，我将使用 Adobe 在 Dreamweaver CS5 中所采用的术语并用括号括起相应的 Subversion 术语。

作为一名属于小组的设计人员/开发人员，您的组织可能要求您将代码（如 HTML、CSS、JavaScript）取出和存回（提交）一个现有 Subversion 库。这样，整个开发组可以使用同一个项目和代码库。Subversion 提供几种处理冲突和意外更改的方法。您还可以在指定时刻使用一组不同文件的快照（标签），创建一个标准化的发布流程。

作为个人设计人员/开发人员，您可以使用自己的 Subversion 库跟踪代码更改情况，当您要还原为之前的某个版本时，系统允许您撤消（还原）更改。为网站以及脚本和其他代码开发 HTML 时，我主要以这种方式使用 Subversion。要查看代码的某个修订版的情况更是数不胜数。我每次都能使用 Subversion 快速获得特定修订版并找出之前版本与当前版本之间的差异。

库

库是数据的中央存储点，使用版本控制管理的所有文件都保存在那里。库通常存放在中央服务器上，但也可以在本地系统上创建它。对于 Subversion 客户端（包括 Dreamweaver CS5）而言，库与标准目录结构很相似，就像机器上的本地文件系统一样。虽然客户端将库视为一个目录结构，服务器则将库视为一个用于跟踪文件及其更改情况的复杂系统。多个用户可以同时访问一个库，因此 Subversion 是小组开发的理想之选。

Dreamweaver CS5 用户通过一个库路径和连接方法访问库，它通常由库管理员提供。

取出和存回（提交）

使用 Subversion（或任何 VCS）时，有三种基本的开发操作：取出一个或多个文件，对任何文件做出更改，然后将这些文件存回库中。该系统旨在跟踪对文件所作的每个更改并观察开发人员之间的冲突。每当库的本地副本与远程版本不同步时，可以通过执行更新重新同步库目录结构。

如果两个设计人员/开发人员更改同一个文件，提交者将收到冲突警报，他/她随后即可联系另一方以解决冲突并确定谁的更改占先。

比较 (diff) 与撤消 (revert)

使用 Subversion 管理开发项目有许多优势，但最主要的优势有两个。第一个优势是可以通过比较当前文件和之前文件，确定它们的差异以及所作的更改。这个过程有时称为比较文件，它使您能找出两次提交到 Subversion 库的文件之间的更改情况。

第二个主要优势在于，使用 Subversion 可以还原为给定文件之前的某个版本。假设某人更改了一个网页或 CSS 文件，令网站无法使用。如果没有 VCS，开发人员将不得不手动重新生成旧版文件或找出备份。借助 Subversion，您可以轻松还原为已更改文件的先前版本。回复之前某个时刻的快照的功能与 Mac OS X 10.6.x 中新增的 Time Machine 功能十分相似。

主干、分支和标签

如果您属于一个较大的开发小组，可能有一名 Subversion 管理员负责管理库中的目录结构。这个目录结构因每家公司的开发工作流程方法不同而异。理解主干、分支和标签可以帮助您在讨论 Subversion 时与小组成员实现有效沟通。

• 主干：库中的某个项目的主要部分称为主干。将通过它管理代码的主要部分并将站点的主线开发放在其中。如果库要管理多个网站，则它们可能有各自的主干。
• 分支：当开发人员或小型开发小组要使用自己的主线主干版本控制“副本”时，通常会创建分支。分支中进行的工作通常时间有限，并且当派生项目完成时，会合并回主干中。如果某些项目保留派生状态，它们不会合并回主干。
• 标签：您可能熟悉商业及开放源代码软件不同的版本编号系统。Apple 使用 xx.x.x 格式对发行版进行编号（例如，10.6.3）。Microsoft 采用另一种方法，在主产品名称后面加上构建号（例如，Windows XP，版本 5.1，构建 2600.xpsp.080413-2111）。这两种编号系统都与 VCS 中的标签有关。标签是一个或多个文件在 VCS 库中的时间快照。您可以将它视为完整复制一个 Web 内容文件夹，然后使用版本号为它添加标签（例如，WebSite_1.0）。大多数组织都有一个构建系统，它为一组文件添加标签，用于发布到登台（测试版）或生产（最终发行版）。在我工作过的一家公司，我负责开发自定义推送脚本，它们为库中的 Web 内容添加标签，然后将所有已添加标签的代码从构建服务器同步到负载平衡系统后方所有不同的 Web 服务器。

个人开发人员可能从不需要在主干外创建分支，但有些开发人员使用标签。如果您不准备使用标签，请参阅本文结尾部分的后续步骤部分获取更多 Subversion 资源。

将版本控制集成到工作流程中

Web 设计和开发工作流程因组织不同而相差悬殊。这一差异使得很难为在工作流程中使用 VCS 定义一个标准。我曾效力于多家进行 Web 开发和传统软件开发的公司，每家公司都采用自己的方法将 VCS 集成到工作流程中。但是，可以借助一些相似性指导从一个不基于 VCS 的工作流程转到一个使用 Subversion 的工作流程。此处概述的方法绝不是唯一的最佳做法或选择，但我认为它是一个好起点。

大多数 Dreamweaver 用户有一个网站的本地副本和一台远程服务器，后者用于托管设计小组开发的内容。远程服务器可以是登台或开发系统，或是实际的生产服务器（对于较小的小组而言）。较大的公司倾向于使用开发服务器测试和试用代码及内容。他们通常有专人负责将代码推送到生产网站。

个人开发人员或属于较小的小组的典型工作流程是编辑站点的本地副本，然后在不同的时刻推送编辑结果（完成任务时或一天结束时）。开发人员可以定期下载整个站点，确保自己与小组的其余人员持有相同的内容，但发生这种情况的频率较低，因为更改很少重叠。如果本地内容与远程内容不同或是不同的开发人员更改了同一文件，这种方法比较容易造成问题。

对于较大的小组，这种工作流程略有不同，因为不同开发人员所做的更改更容易产生冲突并导致潜在的网站问题。在这种情况下，个人设计人员的流程可能如下：

1. 上午进办公室，喝杯咖啡并查看电子邮件。
2. 使用 Dreamweaver 将站点的最新副本从登台服务器下载到本地系统。
3. 对需要更新的不同本地文件做出相应更改，或为站点扩展添加新文件。
4. 将那些更改上传回登台服务器。
5. 测试更改，确保一切可用。

一旦站点可转入生产，设计人员或设计小组将要求负责发布的人员将站点推送到生产，此时客户就可以访问它。

将 Subversion 用作工作流程的一部分可以大幅改善更改管理并提供本文之前部分中提到的许多其他优势。我建议使用以下工作流程：

1. 个人开发人员上午进公司，查看与站点开发相关的任务列表。这可以包括对现有内容的增强或缺陷修复。许多公司采用 Bugzilla 等功能或缺陷跟踪系统，实现对这些任务的跟踪。
2. 开发人员随后执行取出操作，从 Subversion 服务器更新他们的本地文件副本。这可以确保他们获得所有最新副本以及最后一次更新后其他开发人员存回的更改。
3. 随后就可以对文件进行更改和添加操作。要测试这些更改，开发人员可以将内容上传到登台服务器。
4. 在登台服务器上测试更改后，开发人员可以将文件存回（提交）到库。此时，其他开发人员可以取出它们。如果存回时发生冲突，开发人员可以联系其他小组成员，讨论相关问题并决定如何解决它们。要帮助解决这个问题，开发人员可以使用 diff 工具将库副本与文件最新的可用副本进行比较。
5. 构建开发人员将定期（按计划或到达某个开发里程碑时）将更新库中的本地站点副本，并将该版本推送给生产。大多数公司会使用高级 Subversion 功能，如用于协助这一流程的标签。

这一流程可以帮助您的小组将 Subversion 集成到工作流程中。这个流程可能会越来越复杂，但这是着手使用 VCS 的一个好起点。

当您作为一个大型小组的一部分处理某个项目时，通常已有一名小组成员设置 Subversion 服务器和库，并且可以为您提供远程库的连接方法和凭据。Dreamweaver CS5 支持四个主要的 Subversion 连接协议：HTTP、HTTPS、SVN 和 SVN+SSH。

根据我的经验，大多数环境设置了 Subversion 和 Apache，并且支持使用 HTTP 或 HTTPS 协议方法连接到 Subversion 服务器。还可以通过其他方法连接到 Subversion 服务器，因此请务必向 Subversion 管理员咨询连接的详细信息。在本文的示例中，我使用 HTTP 方法连接到库。

不同于大型小组中的设计人员/开发人员，个人开发人员可能已使用 Dreamweaver 管理他们的网站并确定了大部分站点定义，但他们需要设置一个 Subversion 库。这可能还适用于公司负责最初创建 Subversion 库的资深开发人员。

因此必须理解如何创建库以及最初存回一些 Web 内容。但这个过程比较高级，因此它包含在本文系列的最后一部分中。对于最初存回内容，我已经在 Dreamweaver 中设置了一个网站，并将启用 Subversion 支持，开始在 Dreamweaver CS5 中使用 Subversion 客户端。

为 Subversion 库配置新站点

在 Adobe Dreamweaver CS5 中，版本控制系统的配置设置作为站点定义的一部分进行管理。管理的各个网站可使用不同的 Subversion 设置。

假设一些内容已经存回库中，作为设计/开发小组的一名新成员，您希望访问这个现有 Web 内容和代码。

在 Dreamweaver 中，选择“站点”>“管理站点”，打开“站点定义”对话框（请参阅图 1）。

图 1.选择“站点”>“管理站点”，访问一个现有站点

要为当前站点新建站点定义，依次单击“新建”和“站点”（请参阅图 2）。如果显示的是“基本”视图，单击“高级”（靠近对话框顶部）可切换视图并访问版本控制设置。

图 2.依次单击“新建”和“站点”。

在左侧的“类别”下，选择“本地信息”（请参阅图 3）。然后，输入站点的本地信息，包括名称、本地根文件夹和 HTTP 地址。我在本例中使用 voltmer.com，设置如下：

• 站点名称：voltmer.com
• 本地根文件夹：/Users/Voltmer/Web Sites/voltmer.com
• 默认图像文件夹
• HTTP 地址：http://www.voltmer.com

图 3.输入新站点的本地信息。

注意：我在 Web Sites 文件夹中为 voltmer.com 新建了一个空目录。它是空的，因为我还没有从 Subversion 服务器取出我的 Web 内容。并且，我将“默认图像文件夹”字段留空，因为那里还没有文件夹。它将来自库，并且我稍后会返回并编辑该值。

设置本地信息后，单击左侧的“远程信息”，并将“访问”设置为“无”（请参阅图 4）。一些经验丰富、习惯于将数据从 Dreamweaver 直接推送到生产网站的 Dreamweaver 用户可能会觉得奇怪。但对于一个较大的组织而言，由子小组或自动化脚本从 Subversion 服务器执行更新，然后将添加标签的一组文件推送到产品服务器是很常见的事。

图 4.在“远程信息”下，将“访问”设置为“无”。

如果不要将远程站点用于测试或登台，可以像以前那样配置这些设置。

如果您负责将更新推送到生产（或是负责该操作的人员之一），您可能还希望在该界面中配置生产服务器；但是，我建议您考虑使用自动构建系统，将内容部署到生产站点。

然后，选择“版本控制”，选择“Subversion”作为访问方法（请参阅图 5）。您只有一个选项，因为截至撰写本文时，Dreamweaver CS5 只支持一种 VCS。

指定连接到 Subversion 库所需的各种连接设置，包括协议和服务器地址等。您的 Subversion 管理员应当可以提供这些值。我的设置如下：

• 访问： Subversion
• 协议： HTTP
• 服务器地址： localhost
• 存储库路径： /repo/voltmer.com/
• 服务器端口： 默认值
• 用户名： voltmer
• 密码： <secretpassword>

图 5.指定 Subversion 库的版本控制设置。

注意：本例中的服务器与客户端运行在同一台机器上，因此我将 localhost 用作服务器名。Localhost 是一个别名，它指本地机器。

要验证设置是否有效，单击“测试”。如果一切配置正确，Dreamweaver 将显示一个对话框，其中显示“服务器和项目可访问！”（请参阅图 6)。如果看不到此消息，请参阅 Dreamweaver CS5 文档或咨询 Subversion 库管理员，确认配置设置。

图 6.如果一切配置正确，可看到该对话框。

要完成，单击“站点定义”对话框中的“确定”。

注意：您可能需要在其他类别中修改站点定义设置，但那些配置已超出本文范围。

取出和编辑内容

此时，Dreamweaver CS4 界面的“本地文件”区域中没有任何内容，因为还没有从库中取出内容。要取出内容，请确保您在网站的“本地文件”区域，右键单击或按 Ctrl 键单击目录结构顶部的站点文件夹，选择“版本控制”>“获取最新版本”（请参阅图 7）。此时，本地目录结构将与服务器上的 Subversion 库中的内容进行同步。您已经取出代码，随时可以开始进行编辑。

图 7.选择“版本控制”>“获取最新版本”，从 Subversion 检索内容。

图 8 显示我的 voltmer.com 取出结果。我现在可以更改某些内容。

图 8.更新后的本地视图。

具体而言，我决定更新 voltmer.com 上的 index.html 文件的部分内容。我忘记更改主页标题的默认值，并且不喜欢此时的标题，所以我要将：

更改为：

为了进行更改，我双击“本地文件”区域中的 index.html 文件，打开它进行编辑。默认情况下，我看到的是“设计”视图。在页面顶部，我将“Title”更改为“Voltmer's Website”。我也可以切换到“代码”视图或“拆分”视图，直接在 HTML 中进行编辑。上述任何操作都可以更改底层的文件。完成更改后，我关闭文件并保存更改。

此时，我的“本地文件”区域略有变化。Dreamweaver CS4 在 index.html 旁添加了一个勾号，表明我已更改此文件（请参阅图 9）。这只是本地更改；库中的文件保持不变。对于 Subversion 服务器而言，该文件尚未更改。其他用户可以取出他们自己的站点副本并做出更改，但他们看不到我对 index.html 所做的更改。

我要将所做的更改提交回库，最终发布到生产网站，因此我需要将这些更改存回（提交）到库。

图 9.index.html 旁的勾号表明对文件的本地更改。

要这样做，我右键单击已更改的文件并选择“存回”（请参阅图 10）。随后会提示我提供“提交消息”。该消息将与文件更改内容一起存储在库中，作为取出与存回之间对文件所作更改的记录。

图 10.选择“存回”，将更改后的文件提交到库。

专业设计人员和开发人员都知道清晰、准确的更改描述十分重要，因为它们可以帮助小组中的每个人理解更改内容及其原因。您甚至可以使用注释回想自己过去所做的某次编辑的细节。对于此次更改，我键入“Changed the title of index.html”（请参阅图 11）。

图 11.为“提交消息”输入一个有意义的更改描述。

在对话框中键入内容后单击“提交”，我的更改即提交到库。当您自己这样做时，您会发现 Dreamweaver CS4 删除了“本地文件”列表中的文件旁的勾号，表明该文件已经与库同步。

使用 diff 和 revert

Subversion 最强大的两大功能是 diff 和 revert。diff 功能允许设计人员/开发人员比较同一文件的两个不同版本，找出它们之间的差异。如果要找出受损版网站与之前的可用版网站之间的更改情况，您就明白它为何如此实用了。借助文件 diff 功能，您可以轻松找出更改部分。

借助 revert 功能，您可以还原为之前的版本。例如，如果客户不喜欢您所作的某项更改，您只需还原为旧版页面。我可以在库中找到旧副本，而不是保留多个旧版，使用 diff 比较旧副本和当前副本，然后还原为旧版。

我们再回到我的示例情景，我接到客户的电话，他/她希望主页标题像以前一样。我手头在处理许多站点，已经记不清自己所作的更改，所以我执行 diff。

我右键单击文件 index.html 并选择“版本控制”>“显示修订版”（请参阅图 12）。

图 12.选择“版本控制”>“显示修订版”进行版本比较。

在“修订历史记录”对话框中，我选择要比较的两个修订版，然后单击“比较”（请参阅图 13）。

图 13.选择要比较的修订，单击“比较”。

因为我还没有定义一个用于文件比较的应用程序，所以 Dreamweaver 会询问我是否要选择一个应用程序（请参阅图 14）。我希望使用已安装的某个应用程序。我现在使用的是 Bare Bones Software 的 TextWrangler，您可以选择最适合自己需求的工具。

图 14.单击“确定”选择一个用于文件比较的应用程序。

有关如何安装各种 diff 工具的详细信息，请单击“Dreamweaver 首选项”对话框的“文件比较”类别中的“帮助”（请参阅图 15）。

图 15.在“首选项”的“文件比较”类别中指定首选比较应用程序。

配置 diff 应用程序后，每当我选择“版本控制”>“显示修订版”时，Dreamweaver 会启动该应用程序并比较文件的不同修订（请参阅图 16）。

单击可放大

查看差异后，我认为需要还原为之前的版本。在同一个“修订历史记录”对话框中，我选择要取代当前版本的文件旧版，单击“提升到当前版本”。Dreamweaver 提示我确认要还原为选定版本（请参阅图 17）。

图 17.单击“是”确认要还原为选定修订。

单击“是”后，修订历史记录将自动更新并显示文件更改的新修订号（请参阅图 18），但内容与旧版文件相同。

图 18.修订 2，即最初的存回，现在是最新修订。

此时，如果编辑该文件，我可以看到原来的