如何使用语义 UI 将生成的工件与主构建分开? [英] How can I separate generated artifacts from the main build with semantic UI?

问题描述

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

I am trying to figure out how to integrate Semantic UI with my gulp-based frontend toolchain.

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

The npm artifact semantic-ui includes an interactive installer that will write a semantic.json file to the root of my project and install the less files, gulp tasks and some configuration into my project. All of these files will be put in subdirectories of a single base directory specified in semantic.json.

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

I do not want any dependency implementation files or any generated files in the git repository for my project because this will pollute revision history and lead to unneccessary merge conflicts. I would very much prefer to provide semantic.json only and .gitignore the semantic base directory. On npm install, the Semantic installer should install everything to the base directory specified in semantic.json. When building, I want the artifacts generated into a separate dist directory that does not reside under the semantic base directory.

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

However, if I do this, the installer will fail with a message stating that it cannot find the directories to update and drop me into the interactive installer instead. This is not what I want, because it means my build is no longer non-interactive (which will cause the CI build to fail).

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

How can I integrate Semantic UI into my build without having to commit Semantic and its generated artifacts into my git repository?

推荐答案

这是我们在类似场景中所做的.以下是正确的:

This is what we did in our similar scenario. The following are true:

• 语义 UI 生成的所有内容都在 .gitignore 中.因此，我们在 repo 中仅有的语义 UI 文件是:
  • semantic.json
  • semantic/src 文件夹(这是我们的主题修改实际所在的位置)
  • semantic/tasks 文件夹(可能不需要在 git 上，但由于构建需要它，如果我们将它保存在我们的 repo 中，一切都会变得更简单)
  • Everything Semantic UI generates is in .gitignore. Therefore, the only Semantic UI files we have in our repo are:
    • semantic.json
    • semantic/src folder (this is where our theme modifications actually are)
    • semantic/tasks folder (probably doesn't need to be on git, but since it's needed for building, everything is simpler if we keep it in our repo)

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

    Here are the steps needed to achieve this:

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

    1. Install Semantic UI. By this I assume that you either used npm or cloned it from git (using npm is highly recommended), either way, you have semantic.json in your project's main folder and a semantic folder with gulpfile.js, src and tasks.

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

    Make sure Semantic UI can be built. Navigate to semantic/ and run gulp build. This should create a dist folder in your semantic/ directory. Delete it and also delete Semantic UI's gulpfile.js since you'll no longer need it.

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

    Edit semantic.json. You need to edit two lines:

    1. 将 "packaged": "dist/", 更改为您要输出 semantic.css 和 semantic.js 的路径> 相对于语义 UI 的文件夹.在我们的例子中，它是 "packaged": "../../assets/semantic/",
    2. 以同样的方式更改 "themes": "dist/themes/"，因为 themes/ 文件夹包含 Semantic UI 使用的字体和图像，因此它需要在与 semantic.css 相同的文件夹中.在我们的例子中，它是 "themes": "../../assets/semantic/dist/themes/".
    1. Change "packaged": "dist/", to the path where you'd like to output semantic.css and semantic.js relative to Semantic UI's folder. In our case, it was "packaged": "../../assets/semantic/",
    2. Change "themes": "dist/themes/" in the same way, since the themes/ folder contains fonts and images Semantic UI uses so it needs to be in the same folder as semantic.css. In our case, it was "themes": "../../assets/semantic/dist/themes/".

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

  • Edit your gulpfile.js so that it uses Semantic UI's build task. Add var semanticBuild = require('./semantic/tasks/build'); (if semantic/ is in the same folder as your gulpfile.js) and then simply register a task that depends on it, for example gulp.task('semantic', semanticBuild);.

    (可选)创建一个 clean 任务.为此，我们使用了 del.

    Optionally, create a clean task. We used del for that.

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

  这篇关于如何使用语义 UI 将生成的工件与主构建分开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！