设置UI项目

在开始处理 UI 之前,您需要获取源代码并初始化项目。源可以是 Antora 的默认 UI ,也可以是为与 Antora 一起工作而结构化的现有 UI 项目。

获取默认UI项目

首先,使用 git 克隆默认 UI 项目:

git clone https://gitlab.com/antora/antora-ui-default.git
cd "`basename ${_%.git}`"

上面的示例克隆了 Antora 的默认 UI 项目,然后切换到文件系统上的项目文件夹。留在这个项目文件夹中,以便使用 npm 初始化项目。

安装依赖

接下来,您需要初始化项目。初始化项目本质上意味着将依赖项下载并安装到项目中。这就是 npm 的工作。

在终端中,执行以下命令(在项目文件夹中):

npm install

此命令将 package.json 中列出的依赖项安装到项目内的 node_modules/ 文件夹中。该文件夹不包含在 UI 捆绑包中。该文件夹是安全的,可以删除,但 npm 管理它做得很好。

您会注意到另一个似乎与此相关的文件,即 package-lock.json 。npm 使用此文件确定要使用的依赖项的具体版本,因为 package.json 中的版本通常仅是一个范围。该文件中的信息使得构建可以在不同的计算机和运行上进行复制。

如果必须解析尚未列在 package-lock.json 中的新依赖项,则在运行 npm install 时,npm 将使用新信息更新此文件。因此,建议您在更改时将 package-lock.json 文件提交到存储库中。

支持构建任务

现在已经安装了依赖项,您应该能够运行 gulp 命令来查找构建支持的任务

gulp --tasks-simple

您应该看到:

default
clean
lint
format
build
bundle
bundle:pack
preview
preview:build

我们将解释这些任务的用途以及何时使用它们。