Question

我试图找出如何将Semantic 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 文件夹（这是我们主题修改的实际位置）
- 语义/任务文件夹（可能不需要使用git，但由于构建需要它，如果我们将它保存在我们的仓库中，一切都会变得更简单）< / LI>
我们永远不需要（重新）运行Semantic UI安装程序，所有内容都集成在我们自己的 gulpfile.js 中。
assets 文件夹中的语义UI输出，该文件夹与其来源不在同一文件夹中。
根据我的 package.json 中的规则，使用npm自动更新语义UI。

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

安装语义用户界面。通过这个我假设你使用npm或者从git克隆它（使用npm 高度推荐），无论哪种方式，你的项目中都有 semantic.json ＆＃39; s主文件夹和语义文件夹，其中包含 gulpfile.js ， src 和任务。
确保可以构建语义UI。导航到 semantic / 并运行gulp build。这应该在语义/ 目录中创建一个 dist 文件夹。删除它并删除语义UI的 gulpfile.js ，因为您不再需要它。
编辑 semantic.json 。您需要编辑两行：
1. 将"packaged": "dist/",更改为您希望相对于语义UI输出 semantic.css 和 semantic.js 的路径夹。在我们的例子中，它是"packaged": "../../assets/semantic/",
2. 以相同的方式更改"themes": "dist/themes/"，因为 themes / 文件夹包含语义UI使用的字体和图像，因此它需要与 semantic.css <在同一文件夹中/ em>的。在我们的例子中，它是"themes": "../../assets/semantic/dist/themes/"。

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

（可选）创建 clean 任务。我们使用了del。

gulp.task('semantic', semanticBuild);

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

1 个答案: