菜单

构建工具
Semantic UI 中使用 Gulp

概述

30秒解释 (30 Second Explanation)

下载 Semantic UI 到安装文件夹,然后运行 gulp 命令行

编译所有文件:

gulp build

查看修改:

gulp watch

为什么用构建工具 (Why Build Tools?)

Semantic UI 使用 Gulp 的几个理由:

过程 LESS 文件的 主题变量
添加前缀以 autoprefixer支持浏览器
在调整主题时,监视文件更改并重建必要的文件
缩小和发布可以在不同的目录
允许仅对指定的组件进行自定义构建
允许高级用法比如 RTLCSS

目录结构

Semantic UI 项目的目录结构包含以下文件夹结构。

src
site
你站点的主题
themes
default
默认主题
packaged-theme
额外主题
theme.config
主题配置文件
dist
编译好的 CSS 和 JS 文件
components
单个组件 CSS 和 JS
semantic.css
发布的CSS
semantic.js
发布的JS
semantic.json
包含 gulp 的构建设置

Gulp 命令 (Gulp Commands)

下面是 gulp 支持的命令

命令 描述
install 按照 semantic.json 进行安装
watch (default) 查看源文件中的修改,编译修改后的文件
build 编译所有文件
clean 清除 dist/ 下的所有文件
version 输出当前版本
build-javascript 编译 JS 文件
build-css 编译 CSS 文件
build-assets 编译 assets 文件
serve-docs 将文件提供给本地文档实例
build-docs 编译文件到docs文件夹中

配置文件

semantic.json

构建工具的设置都存储在一个特殊的称为semantic.json的文件中,可以被包含在semantic安装文件夹的父文件夹的任何文件夹中。

如果你使用 npm 或者 meteor,一个名为 semantic.json 的文件将在你项目的根路径自动创建。如果你使用了不同的包管理,你可以运行 gulp install 来执行安装。

{ // base path added to all other paths specified in "paths" "base": "", // current version of Semantic UI "version": "2.2.10", "paths": { "source": { // source theme.config "config" : "src/theme.config", // source definition folder "definitions" : "src/definitions/", // source site theme "site" : "src/site/", // source themes folder "themes" : "src/themes/" }, "output": { // packaged source (both compressed/uncompressed) "packaged" : "dist/", // uncompressed source "uncompressed" : "dist/components/", // compressed source "compressed" : "dist/components/", // output directory for theme assets "themes" : "dist/themes/" }, // directory for gulp clean task "clean" : "dist/" }, // when set to an integer permission, will set dist files with this file permission "permission" : false, // whether gulp watch/build should run RTLCSS "rtl": false, // will only include components with these names "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", "form", "state", "visibility" ], // whether to include special project maintainer tasks "admin": false }

theme.config

LESS 使用特殊的配置文件 theme.config,以此来让你指定每个组件应该使用什么主题。如果尚未生成此文件,则在运行生成工具时将收到错误消息。

你可以通过主题向导来了解更多关于 theme.config的使用。

导入Gulp任务 (Importing Gulp Tasks)

查看 高级部分 的例子,来了解如何在自己的Gulpfile中导入Gulp任务。

自动安装与集成 (Auto-Install & Continuous Integration)
2.2新特性

我们在 2.2新版本中对 semantic.json 添加了新的设置,以帮助自动化部署更精简。

semantic.json 中指定 autoInstall: true 能在运行npm install时不显示任何提示信息,以快速的完成自动化部署。