如何使用语义 UI 将生成的工件与主构建分开？

Question

我正在尝试弄清楚如何将语义 UI 与我的基于 gulp 的前端工具链集成。

npm 工件 semantic-ui 包含一个交互式安装程序，它将将 semantic.json 文件写入我的项目的根目录，并将更少的文件、gulp 任务和一些配置安装到我的项目中。所有这些文件都将放在semantic.json 中指定的单个基本目录的子目录中。

我不希望我的项目在 git 存储库中有任何依赖项实现文件或任何生成的文件，因为这会污染修订历史并导致不必要的合并冲突。我非常希望只提供semantic.json 和.gitignore 语义基目录。在npm install 上，语义安装程序应将所有内容安装到semantic.json 中指定的基本目录中。构建时，我希望将工件生成到一个单独的 dist 目录中，该目录不位于语义基础目录下。

但是，如果我这样做，安装程序将失败并显示一条消息，指出它找不到要更新的目录并将我放到交互式安装程序中。这不是我想要的，因为这意味着我的构建不再是非交互式的（这将导致 CI​​ 构建失败）。

如何将 Semantic UI 集成到我的构建中，而无需将 Semantic 及其生成的工件提交到我的 git 存储库中？

Answer 1

这就是我们在类似场景中所做的。以下是正确的：

• 语义 UI 生成的所有内容都在 .gitignore 中。因此，我们在 repo 中仅有的语义 UI 文件是：
  • semantic.json
  • semantic/src 文件夹（这是我们的主题修改实际所在的位置）
  • semantic/tasks 文件夹（可能不需要在 git 上，但由于构建需要它，如果我们将它保存在我们的 repo 中，一切都会变得更简单）
• 我们永远不需要（重新）运行 Semantic UI 安装程序，所有内容都集成在我们自己的 gulpfile.js 中。
• 我们的 assets 文件夹中的语义 UI 输出与其源不在同一文件夹中。
• 语义 UI 根据我的 package.json 中的规则使用 npm 自动更新。

以下是实现此目的所需的步骤：

1. 安装语义 UI。由此，我假设您使用 npm 或从 git 克隆它（强烈建议使用 npm），无论哪种方式，您的项目主文件夹中都有 semantic.json 并且semantic 文件夹，其中包含 gulpfile.js、src 和 tasks。

2. 确保可以构建语义 UI。导航到 semantic/ 并运行 gulp build。这应该在您的 semantic/ 目录中创建一个 dist 文件夹。删除它并删除 Semantic UI 的 gulpfile.js，因为您将不再需要它。

3. 编辑 semantic.json。您需要编辑两行：

   1. 将"packaged": "dist/", 更改为您希望输出 semantic.css 和 semantic.js 相对于 Semantic UI 文件夹的路径。在我们的例子中，它是"packaged": "../../assets/semantic/",
   2. 以同样的方式更改"themes": "dist/themes/"，因为 themes/ 文件夹包含 Semantic UI 使用的字体和图像，因此它需要与 semantic.css在同一个文件夹中>。在我们的例子中，它是"themes": "../../assets/semantic/dist/themes/"。

4. 编辑您的 gulpfile.js 以便它使用 Semantic UI 的构建任务。添加var semanticBuild = require('./semantic/tasks/build');（如果semantic/ 与您的gulpfile.js 位于同一文件夹中），然后只需注册一个依赖它的任务，例如gulp.task('semantic', semanticBuild);。

5. （可选）创建一个 clean 任务。为此，我们使用了del。

   gulp.task('clean:semantic', function(cb) {
       del(['assets/semantic'], cb);
   });