如何使用语义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中.
• 我们的资源文件夹中的语义UI输出与其源不在同一文件夹中.
• 根据我的package.json中的规则,使用npm自动更新语义UI .

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

1. 安装语义UI.通过这个我假设你使用npm或者从git克隆它(强烈推荐使用npm ),无论哪种方式,你在项目的主文件夹中都有semantic.json,在gulpfile.js,src和tasks中有一个语义文件夹.

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

3. 编辑semantic.json.您需要编辑两行:

   1. 更改"packaged": "dist/",为您希望相对于Semantic UI文件夹输出semantic.css和semantic.js的路径.在我们的例子中,它是"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');(如果语义/与gulpfile.js位于同一文件夹中),然后只需注册一个依赖于它的任务,例如gulp.task('semantic', semanticBuild);.

5. (可选)创建一个干净的任务.我们使用了del.

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