我如何使用语义UI将生成的构件从主构建中分离出来？ [英] How can I separate generated artifacts from the main build with semantic UI?

问题描述

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

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

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

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

解决方案

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

• 语义UI生成的所有内容都位于 .gitignore 中。因此，我们在回购库中唯一的语义UI文件是：
  
  
  
  
  • semantic.json
  
  
  • semantic / src 文件夹（这是我们的主题修改实际所在的位置）
    
  • semantic / tasks 我们不需要在git上，但是因为它需要构建，所以一切都比较简单，如果我们将它保存在我们的仓库中）
  
  


• 需要重新运行语义UI安装程序，所有内容都集成在我们自己的 gulpfile.js 中。


• 我们的资产中的语义UI输出 em>文件夹，与文件夹不在同一个文件夹中。


• 根据我的 package.json 中的规则，使用npm自动更新语义UI

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

1. 安装Semantic UI。通过这个，我假设你使用npm或者从git克隆它（使用npm 非常强烈），无论哪种方式，你的项目的主文件夹中都有 semantic.json 使用 gulpfile.js ， src 和任务的语义文件夹。




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




3. 编辑语义。 JSON 。您需要编辑两行：
   
   

   
   
   1. 更改打包：dist /，输入到您希望输出相对于语义UI文件夹的 Semantic.css 和 semantic.js 的路径。在我们的例子中，它是packaged：../../ assets / semantic /，
   
   
   2. 更改<$因为 themes / 文件夹包含Semantic UI使用的字体和图像，所以它需要是c $ c>themes：dist / themes /与 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. 或者，创建一个 clean 任务。我们使用 del 。

   
   
   <$ p code del（['assets / semantic']，cb）;
   }）;
   

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

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.

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.

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).

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:

• 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)
• We never need to (re)run the Semantic UI installer, everything is integrated in our own gulpfile.js.
• Semantic UI outputs in our assets folder which is not in the same folder as its sources.
• Semantic UI is updated automatically using npm as per the rules in my package.json.

Here are the steps needed to achieve this:

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.

2. 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.

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

   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/".

4. 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);.

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

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

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