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

我正试图找出如何将语义UI与基于gulp的前端工具链集成

npm工件

semantic ui

包括一个交互式安装程序，它将把

semantic.json

文件写入我的项目根目录，并将较少的文件、大量任务和一些配置安装到我的项目中。所有这些文件都将放在semantic.json中指定的单个基本目录的子目录中

我不希望在我的项目的git存储库中有任何依赖项实现文件或任何生成的文件，因为这将污染修订历史并导致不必要的合并冲突。我非常希望只提供

semantic.json

和

.gitignore

语义基目录。在

npm install

上，语义安装程序应将所有内容安装到

Semantic.json

中指定的基本目录中。在构建时，我希望将工件生成到一个单独的dist目录中，该目录不位于语义基目录下

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

---

如何将语义UI集成到构建中，而不必将语义及其生成的构件提交到git存储库中？

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

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

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

安装语义用户界面。通过这种方式，我假设您使用npm或从git克隆它（高度推荐使用npm），无论哪种方式，您的项目主文件夹中都有semantic.json，还有一个包含gulpfile.js、src和tasks的semantic文件夹

确保可以构建语义用户界面。导航到semantic/并运行

gulpbuild

。这将在您的semantic/目录中创建一个dist文件夹。删除它，同时删除语义用户界面的gulpfile.js，因为您不再需要它

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

将

“打包”：“dist/”，

更改为相对于语义UI文件夹输出semantic.css和semantic.js的路径。在我们的例子中，它是

“打包的”：“../../assets/semantic/”，

更改

“主题”：“dist/themes/”

的方式相同，因为主题/文件夹包含语义UI使用的字体和图像，所以它需要与Semantic.css位于同一文件夹中。在我们的例子中，它是

“主题”：“../../assets/semantic/dist/themes/”

编辑gulpfile.js，使其使用语义UI的构建任务。添加

var semanticBuild=require（'./semantic/tasks/build'）

（如果semantic/与gulpfile.js位于同一文件夹中），然后只需注册依赖于它的任务，例如

gulp.task（'semantic'，semanticBuild）

或者，创建一个干净的任务。我们过去是这样做的

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

---

如果您没有以任何方式修改语义UI（即添加主题或更改变量/覆盖），并且只是下载它并进行构建，那么为什么还要使用它的构建系统呢？为什么不直接使用Bower的构建呢？这就是我最终要做的，但是将来需要主题化。所以这个问题仍然有效。看起来很有希望，谢谢！但是，您是否确定依赖于

语义任务的任务只有在
语义任务完成后才能开始？因为用于语义的gulp脚本使用了
gulp.start（）
，这意味着gulp无法知道构建何时完成。我不是-我们将语义作为一项单独的任务，因为构建需要很长时间，因此我们只在需要时才进行。您也许可以使用来实现您想要的，并实际调用语义UI的gulpfile.js，但我不确定这一点。