构建系统

相关源文件

• .browserlistrc
• gulpfile.js
• package.json
• semantic.json.example
• tasks/build.js
• tasks/build/assets.js
• tasks/build/css.js
• tasks/build/javascript.js
• tasks/check-install.js
• tasks/clean.js
• tasks/collections/internal.js
• tasks/config/defaults.js
• tasks/config/docs.js
• tasks/config/npm/gulpfile.js
• tasks/config/project/config.js
• tasks/config/project/install.js
• tasks/config/project/release.js
• tasks/config/tasks.js
• tasks/config/user.js
• tasks/docs/build.js
• tasks/docs/metadata.js
• tasks/docs/serve.js
• tasks/install.js
• tasks/rtl/build.js
• tasks/rtl/watch.js
• tasks/version.js
• tasks/watch.js

Semantic UI 的构建系统负责将源文件转换为可分发资源。它负责将 LESS 编译为 CSS、最小化 JavaScript、处理资源以及创建打包分发。本文档涵盖了构建系统的架构、配置和操作。

有关与构建系统配合使用的样式系统的信息，请参阅 样式系统。

概述

Semantic UI 的构建系统由 Gulp 提供支持，采用模块化任务架构，可实现灵活的配置和扩展。该系统根据用户配置处理来自 src/ 目录的源文件，并将它们输出到 dist/ 目录。

来源：gulpfile.js1-91 tasks/build.js1-48 tasks/config/project/config.js1-141

配置系统

构建系统通过项目根目录下的 semantic.json 文件进行配置。此文件定义了路径、组件选择和构建选项。

默认配置

Semantic UI 包含一个默认配置，但允许通过 semantic.json 文件进行广泛的自定义

示例 semantic.json 结构

来源：semantic.json.example1-25 tasks/config/user.js1-58 tasks/config/project/config.js1-141

构建流程

构建过程通过几个阶段将源文件转换为分发文件

来源：tasks/build/css.js1-123 tasks/build/javascript.js1-87 tasks/build/assets.js1-46

核心 Gulp 任务

Semantic UI 的构建系统定义了几个关键的 Gulp 任务，这些任务处理构建过程的不同方面

任务名称	目的	源文件
build	运行所有构建子任务的主构建任务	tasks/build.js
build-css	将 LESS 文件编译为 CSS	tasks/build/css.js
构建JavaScript	处理 JavaScript 文件	tasks/build/javascript.js
build-assets	将资源文件复制到分发目录	tasks/build/assets.js
watch	监视文件更改并重建	tasks/watch.js
install	首次设置 Semantic UI	tasks/install.js
clean	删除分发文件	tasks/clean.js
build-rtl	创建 RTL 版本（如果启用）	tasks/rtl/build.js

来源：gulpfile.js45-85 tasks/build.js1-48

构建任务

build 任务是生成所有可分发文件的主要入口点

来源：tasks/build.js1-48 gulpfile.js45-56

监视任务

watch 任务监视源文件更改并根据需要触发部分构建

来源：tasks/watch.js1-268 gulpfile.js49

安装过程

install 任务通过创建必要的配置文件和目录结构来设置项目中的 Semantic UI

来源：tasks/install.js1-474 tasks/config/project/install.js1-758

输出结构

构建系统在结构化的输出目录中生成文件

目录	目的	内容类型
dist/	主要的发布目录	打包文件（semantic.css, semantic.js）
dist/components/	独立的组件	组件 CSS 和 JS 文件
dist/themes/	主题资源	图像、字体和其他主题资源

单个组件的转换过程示例

src/definitions/modules/dropdown.less + src/themes/default/modules/dropdown.variables 
  → dist/components/dropdown.css + dist/components/dropdown.min.css

src/definitions/modules/dropdown.js 
  → dist/components/dropdown.js + dist/components/dropdown.min.js

来源：semantic.json.example4-17 tasks/config/defaults.js19-41

依赖图

构建系统依赖几个 Gulp 插件来处理文件

来源：package.json18-82 tasks/build/css.js1-123 tasks/build/javascript.js1-87

自定义构建过程

构建系统可以通过几种机制进行自定义

1. 修改 semantic.json：更改路径、组件选择和构建选项
2. 添加自定义组件：将文件放在正确的源目录中
3. 扩展 Gulp 任务：在项目的 Gulpfile 中创建其他任务

示例 semantic.json 自定义

来源：tasks/config/project/install.js165-224 semantic.json.example1-25

右到左 (RTL) 支持

Semantic UI 通过专门的构建流程为右到左 (RTL) 语言提供支持

来源： tasks/rtl/build.js1-140 tasks/rtl/watch.js1-238 gulpfile.js78-85

内部包任务

构建系统包含用于创建组件文件打包版本的内部任务。

来源： tasks/collections/internal.js1-228 tasks/config/tasks.js1-164

命令行界面

Semantic UI 构建系统主要通过以下命令进行交互：

命令	目的
gulp build	构建所有文件
gulp watch	监视更改并重新构建。
gulp clean	清理分发文件
gulp install	运行安装
gulp build-css	仅构建 CSS 文件
gulp build-javascript	仅构建 JavaScript 文件
gulp build-assets	仅构建资源文件
gulp version	显示当前版本

来源： gulpfile.js45-63 package.json16-18

结论

Semantic UI 构建系统提供了一种灵活强大的方式，可以将源文件转换为可用于生产的资源。该系统基于 Gulp 构建，并利用模块化的任务架构，允许进行广泛的定制。理解这个构建系统对于在您的项目中有效使用和扩展 Semantic UI 至关重要。