我们承诺每个页面最多只显示一个小型广告。别担心，隐藏此消息将确保您不会再次被烦扰。
概述
为什么要使用构建工具？
语义 UI 使用 Gulp 具有以下几个原因
使用 主题变量 处理 LESS 文件
使用 autoprefixer 为 支持的浏览器 添加供应商前缀
监视文件更改，并在调整主题时重建必要的文件
自动处理资产路径，以便压缩和合并的版本可以存在于不同的目录中
允许仅包含网站所需组件的自定义构建
允许使用 RTLCSS 进行高级使用，例如从右到左 (RTL) 语言
文件夹结构
语义 UI 项目包括以下文件夹结构。
src
dist
编译后的 CSS 和 JS 文件
components
各个组件的 CSS 和 JS 文件
semantic.css
合并的版本
semantic.js
合并的版本
semantic.json
包含 gulp 的构建设置
Gulp 命令
以下是所有可用 gulp 命令的列表
| 命令 | 描述 |
|---|---|
| install | 询问安装问题以设置 semantic.json |
| watch (默认) | 监视源文件中的更改，并在更改时构建文件 |
| build | 构建所有文件 |
| clean | 清除 dist/ 文件夹 |
| version | 输出当前版本 |
| build-javascript | 构建 JS 文件 |
| build-css | 构建 CSS 文件 |
| build-assets | 构建资产文件 |
| serve-docs | 将文件提供给本地文档实例 |
| build-docs | 将文件构建到文档文件夹 |
配置文件
semantic.json
构建工具设置存储在一个名为 semantic.json 的特殊文件中，它可以包含在语义安装文件夹的父文件夹中的任何文件夹中。
如果您使用了 npm 或 meteor，则会在您的项目根目录中自动为您生成一个 semantic.json 文件。如果您使用了其他包管理器，则可以运行 gulp install 来运行交互式安装程序。
{ // 添加到“paths”中指定的所有其他路径的基路径 "base": "", // 语义 UI 的当前版本 "version": "2.5.0", "paths": { "source": { // 源主题配置文件 "config" : "src/theme.config", // 源定义文件夹 "definitions" : "src/definitions/", // 源网站主题 "site" : "src/site/", // 源主题文件夹 "themes" : "src/themes/" }, "output": { // 打包的源代码（压缩/未压缩） "packaged" : "dist/", // 未压缩的源代码 "uncompressed" : "dist/components/", // 压缩的源代码 "compressed" : "dist/components/", // 主题资产的输出目录 "themes" : "dist/themes/" }, // gulp clean 任务的目录 "clean" : "dist/" }, // 当设置为整数权限时，将使用此文件权限设置 dist 文件 "permission" : false, // gulp watch/build 是否应该运行 RTLCSS "rtl": false, // 将仅包括这些名称的组件 "components": [ "reset", "site", "button", "container", "divider", "flag", "header", "icon", "image", "input", "label", "list", "loader", "rail", "reveal", "segment", "step", "breadcrumb", "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", "statistic", "accordion", "checkbox", "dimmer", "dropdown", "embed", "modal", "nag", "popup", "progress", "rating", "search", "shape", "sidebar", "sticky", "tab", "transition", "api", "state", "visibility" ], // 是否包含特殊的项目维护者任务 "admin": false }
theme.config
LESS 使用一个特殊的配置文件 theme.config，它可以让你指定每个组件应该使用哪个主题。如果你还没有生成这个文件，那么在运行构建工具时，你会收到错误消息
你可以通过查看 主题指南 来了解更多关于 theme.config 的信息
导入 Gulp 任务
请查看我们的 食谱部分，以了解如何将各个 gulp 任务导入您的自定义 Gulpfile 中的示例。
自动安装和持续集成2.2 中的新功能
我们在 2.2 中在 semantic.json 中添加了一个新设置，以帮助使 CLI 或其他自动化部署工作更顺畅。
在环境的 semantic.json 配置中指定 autoInstall: true 将防止在运行 npm install 时出现任何用户提示，从而允许自动化部署。