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

Question

我想弄清楚如何将语义 UI 与我的基于 gulp 的前端工具链集成。

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

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

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

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

Answer 1

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

语义 UI 生成的所有内容都在 .gitignore 中。因此，我们存储库中唯一的语义 UI 文件是:

语义.json

语义/src 文件夹(这是我们的主题修改实际所在的位置)

语义/任务文件夹(可能不需要在 git 上，但由于构建需要它，如果我们将它保存在我们的 repo 中，一切都会更简单)

我们永远不需要(重新)运行语义 UI 安装程序，一切都集成在我们自己的 gulpfile.js 中。

我们的 Assets 文件夹中的语义 UI 输出与其源不在同一文件夹中。

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

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

安装语义用户界面。通过这个，我假设你要么使用 npm 要么从 git 克隆它(使用 npm 是 高度 推荐)，无论哪种方式，你的项目的主文件夹中有semantic.json 和带有gulpfile.js 的semantic 文件夹， src 和任务。

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

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

更改 "packaged": "dist/",到您要输出semantic.css 和semantic.js 相对于Semantic UI 文件夹的路径。在我们的例子中，它是 "packaged": "../../assets/semantic/",

更改 "themes": "dist/themes/"同样，由于themes/文件夹包含Semantic UI使用的字体和图像，因此它需要与semantic.css位于同一文件夹中。在我们的例子中，它是 "themes": "../../assets/semantic/dist/themes/" .

编辑您的 gulpfile.js，使其使用语义 UI 的构建任务。添加 var semanticBuild = require('./semantic/tasks/build'); (如果语义/与您的 gulpfile.js 位于同一文件夹中)，然后只需注册一个依赖于它的任务，例如 gulp.task('semantic', semanticBuild); .

或者，创建一个干净的任务。我们使用了 del为了那个原因。

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