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

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

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

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

1. 安装语义UI。通过这个我假设您使用npm或从git克隆它（使用npm是 高度 推荐），无论哪种方式，你都有 semantic.json 在你的项目的主文件夹和一个 语义 文件夹 gulpfile.js， SRC 和 任务。

2. 确保可以构建语义UI。导航 语义/ 并运行 gulp build。这应该创造一个 DIST 你的文件夹 语义/ 目录。删除它并删除语义UI gulpfile.js 因为你不再需要它了。

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

   1. 更改 "packaged": "dist/", 到您想要输出的路径 semantic.css 和 semantic.js 相对于Semantic UI的文件夹。在我们的例子中，它是 "packaged": "../../assets/semantic/",
   2. 更改 "themes": "dist/themes/" 以同样的方式，自从 主题/ 文件夹包含语义UI使用的字体和图像，因此它需要与文件夹相同 semantic.css。在我们的例子中，它是 "themes": "../../assets/semantic/dist/themes/"。

4. 编辑你的 gulpfile.js 这样它就可以使用Semantic UI的构建任务。加 var semanticBuild = require('./semantic/tasks/build'); （如果 语义/ 与您的文件夹位于同一文件夹中 gulpfile.js例如，然后简单地注册依赖于它的任务 gulp.task('semantic', semanticBuild);。

5. （可选）创建一个 清洁 任务。我们用了 德尔 为了那个原因。

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