Gulp 任务

相关源文件

• .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 中用于构建、监视和管理项目源文件的 Gulp 任务系统。它概述了可用的任务、它们的用途、它们如何交互以及如何在 Semantic UI 的开发或定制过程中使用它们。

有关整体构建系统架构的信息，请参阅构建系统。有关发布过程的完整说明，请参阅发布过程。

概述

Semantic UI 使用 Gulp 作为其主要的构建工具，用于处理源文件并生成分发文件。Gulp 任务处理构建过程的各个方面，包括：

1. 将 LESS 编译为 CSS
2. 处理 JavaScript 文件
3. 管理资产（图像、字体）
4. 监视文件更改并自动重新构建
5. 创建 CSS 的 RTL（从右到左）版本
6. 构建和提供文档
7. 安装和配置 Semantic UI

任务架构

来源：gulpfile.js1-91 tasks/config/user.js1-59 semantic.json.example1-25

主要任务组

Semantic UI 中的 Gulp 任务根据其功能被组织成逻辑组：

任务组	描述	命令	关键文件
构建	将所有源文件编译成发布文件	gulp build	tasks/build.js, tasks/build/*.js
监视 (Watch)	监视文件更改并自动重新构建	gulp watch	tasks/watch.js
安装	在项目中设置 Semantic UI	gulp install	tasks/install.js
RTL（从右到左）	构建 CSS 文件的从右到左版本	gulp build-rtl	tasks/rtl/*.js
文档	构建并提供文档	gulp build-docs, gulp serve-docs	tasks/docs/*.js
实用工具	提供清理和版本信息等实用功能	gulp clean, gulp version	tasks/clean.js, tasks/version.js

来源：gulpfile.js45-90

任务定义

所有任务都在 gulpfile.js 中定义，并使用 tasks 目录中的独立任务文件。任务注册方式如下：

来源：gulpfile.js48-75

核心构建任务

Semantic UI 中的构建过程包含三个主要任务组：

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

构建 JavaScript

build-javascript 任务从定义目录中获取 JavaScript 源文件，对其进行处理，并输出未压缩和压缩版本：

1. 从 src/definitions/**/*.js 读取源文件
2. 扁平化目录结构
3. 替换许可证注释
4. 将未压缩文件输出到 dist/components/
5. 使用 uglify 进行压缩
6. 将压缩文件输出到 dist/components/（带 .min.js 扩展名）
7. 打包成合并文件（semantic.js 和 semantic.min.js）

来源：tasks/build/javascript.js46-81

构建 CSS

build-css 任务将 LESS 文件处理为 CSS：

1. 从 src/definitions/**/*.less 读取源文件
2. 将 LESS 编译为 CSS
3. 使用 autoprefixer 添加厂商前缀
4. 替换注释块和许可证信息
5. 将未压缩文件输出到 dist/components/
6. 压缩 CSS
7. 将压缩文件输出到 dist/components/（带 .min.css 扩展名）
8. 打包成合并文件（semantic.css 和 semantic.min.css）

来源：tasks/build/css.js49-116

构建资产

build-assets 任务将主题资产（图像、字体等）复制到分发目录：

1. 从 src/themes/**/assets/**/*.* 读取资产
2. 如果已配置，则设置权限
3. 复制到 dist/themes/

来源：tasks/build/assets.js29-40

监视任务

监视任务监视文件更改并自动重新构建受影响的组件。

来源：tasks/watch.js66-261

当监视任务检测到文件更改时：

1. 对于 CSS 文件，它会确定受影响的组件并仅重新构建该组件
2. 对于 JavaScript 文件，它会重新构建已更改的文件
3. 对于资产，它会将已更改的文件复制到输出目录

监视任务足够智能，可以根据更改的文件来确定需要重新构建哪些文件，而不是重新构建所有文件。

来源：tasks/watch.js98-198 tasks/watch.js210-236 tasks/watch.js248-259

安装任务

安装任务用于在项目中设置 Semantic UI：

来源：tasks/install.js59-467 tasks/config/project/install.js78-757

安装过程包括：

1. 检查 Semantic UI 是否已安装（通过查找 semantic.json 文件）
2. 如果已安装，检查是否需要更新
3. 如果未安装或需要更新：
   • 询问设置问题（或使用自动安装的默认值）
   • 创建必要的文件和目录
   • 复制定义、主题和任务
   • 创建配置文件（theme.config, semantic.json）
   • 可选地构建文件

来源：tasks/install.js59-467 tasks/config/project/install.js78-757

配置

Semantic UI 的构建系统可通过多个文件进行高度配置：

semantic.json

semantic.json 文件是 Semantic UI 的主要配置文件。它定义了：

• 基本路径
• 源路径和输出路径
• 文件权限
• RTL 支持
• 自动安装设置

semantic.json 示例

来源：semantic.json.example1-25

任务配置

特定于任务的配置在 tasks/config 目录中定义：

• tasks/config/user.js：从 semantic.json 加载用户配置
• tasks/config/tasks.js：定义特定于任务的设置
• tasks/config/project/config.js：解析路径并添加派生值
• tasks/config/project/release.js：版本和发布信息

来源： tasks/config/user.js1-59 tasks/config/tasks.js1-164 tasks/config/project/config.js1-142 tasks/config/project/release.js1-66

RTL 支持

Semantic UI 通过专门的构建任务支持从右到左 (RTL) 语言。

RTL 任务

1. 正常处理 LESS 文件
2. 应用 RTLCSS 转换以翻转方向
3. 输出带 .rtl.css 和 .rtl.min.css 扩展名的 RTL 版本
4. 打包连接文件（semantic.rtl.css 和 semantic.rtl.min.css）

通过在 semantic.json 中设置 "rtl": true 或 "rtl": "both" 来启用 RTL 支持。

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

文档任务

Semantic UI 提供用于构建和提供文档的任务

build-docs

build-docs 任务用于构建文档文件

1. 解析文档源文件中的元数据
2. 将示例复制到文档输出目录
3. 将 LESS 源文件复制到文档输出目录
4. 为文档构建 CSS 和 JavaScript 文件
5. 复制主题资源

来源： tasks/docs/build.js58-194

serve-docs

serve-docs 任务设置文件监视器，以便在源文件更改时自动更新文档。它用于文档的本地开发。

来源： tasks/docs/serve.js67-300

实用工具任务

clean

clean 任务根据 semantic.json 中 paths.clean 设置的定义，从输出目录中删除已构建的文件。

来源： tasks/clean.js17-20

version

version 任务显示 Semantic UI 的当前版本。

来源： tasks/version.js13-15

内部任务

Semantic UI 还使用一些内部任务，这些任务不应直接调用，而是由其他任务使用。

• 打包任务：从单个组件文件创建连接文件
• 集合任务：同时处理多组组件

这些任务在 tasks/collections/internal.js 中定义，并由构建和监视任务使用。

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

依赖项

Semantic UI 的构建系统依赖于多个 Gulp 插件和 Node 模块

这些依赖项在 package.json 的 dependencies 和 peerDependencies 部分中列出。

来源： package.json19-82

使用 Gulp 任务

要使用 Gulp 任务，您需要在全局安装 Gulp 或使用 npx

默认任务（不带参数的 gulp）运行 check-install 任务，该任务会验证 Semantic UI 是否已安装，如果需要则运行安装，如果已安装则启动监视任务。

来源： gulpfile.js48-85 tasks/check-install.js15-32

结论

Semantic UI 的 Gulp 任务系统提供了一个全面而灵活的构建过程，处理将源文件转换为分发文件的所有方面。这些任务组织良好、可配置，并支持 RTL 语言和文档构建等各种功能。

通过理解和使用这些任务，开发人员可以高效地使用 Semantic UI，自定义其组件，并将其集成到他们的项目中。