Menu

构建工具
使用Gulp和语义UI

Overview

30秒的解释

下载语义界面 导航到安装文件夹,然后运行 吞咽命令.

要构建所有文件:

吞咽构建

观察变化

杯看

为什么构建工具?

语义UI使用Gulp有以下几个原因:

处理LESS文件 主题化变量
添加供应商前缀 支持的浏览器 with autoprefixer
当调整主题时,查看文件更改并重建必要的文件
自动处理资产路径, 因此,缩小版和连接版可以存在于不同的目录中
允许只使用站点所需组件的自定义构建
允许高级的使用,如右向左(RTL)语言 RTLCSS

文件夹结构

语义UI项目包括以下文件夹结构.

src
site
你的网站的主题
themes
default
默认主题
packaged-theme
额外的主题
theme.config
用于设置打包主题的配置文件
dist
编译CSS和JS文件
components
单个组件CSS和JS
semantic.css
连接释放
semantic.js
连接释放
semantic.json
包含gulp的构建设置

大口的命令

下面是所有可用gulp命令的列表

Command 描述
install 询问安装问题以设置语义.json
手表(默认) 监视源文件中的更改,并根据更改构建文件
build 构建所有文件
clean Cleans dist/ folder
version 输出当前版本
build-javascript 构建JS文件
build-css 构建CSS文件
扩充资产, 构建资产文件
serve-docs 为本地文档实例提供文件服务
build-docs 构建文件到docs文件夹

配置文件

semantic.json

构建工具设置存储在一个名为 semantic.json 它可以包含在语义安装文件夹的父文件夹中的任何文件夹中.

如果你使用npm或流星,a semantic.json 文件会在项目的根目录下自动生成. 如果您使用不同的包管理器,您可以运行 杯安装 来运行交互式安装程序.

{ //基本路径添加到"paths"中指定的所有其他路径 “基地”:“”, //当前版本的语义UI “版本”:“2.4.2", "路径":{ “源”:{ / /源主题.config “配置 " : " src /主题.config", //源定义文件夹 “定义”:“src /定义/”, //源站点主题 ”网站 " : " src /网站/”, //源主题文件夹 ”主题 " : " src /主题/” }, "输出":{ //已压缩/未压缩的源文件 “打包”:“dist /”, / /未压缩的源 “压缩”:“dist /组件/”, / /压缩源 “压缩”:“dist /组件/”, //主题资产的输出目录 ”主题 " : " dist /主题/” }, //目录的gulp清理任务 “清洁 " : " dist /” }, //当设置为整数权限时,将设置dist文件的权限 “许可”:假的, // 杯看/build是否应该运行RTLCSS “rtl”:假的, //将只包含具有这些名称的组件 “组件”:( "reset", "site", "button", “容器”, “分”, "flag", "header", "icon", "image", "input", "label", "list", "loader", "rail", "reveal", "segment", "step", “面包屑”, "form", "grid", "menu", "message", "table", "ad", "card", "comment", "feed", "item", “统计”, “手风琴”, “复选框”, "dimmer", “下拉”, "embed", "modal", "nag", "popup", “进步”, "rating", "search", "shape", "sidebar", "sticky", "tab", “转型”, "api", "state", “可见性” ], //是否包含特殊的项目维护任务 “管理”:假的 }

theme.config

LESS使用一个特殊的配置文件 theme.config 哪个可以让你指定每个组件应该使用什么主题. 如果您还没有生成此文件,则在运行构建工具时将收到一条错误消息

你可以了解更多关于 theme.config 通过检查 主题指南

进口杯任务

See our 节食谱 例如,如何将单个gulp任务导入到自定义Gulpfile中.

没有 & 持续集成
New in 2.2

365app添加了一个新的设置为 semantic.json in 2.帮助使使用CLI或其他自动化部署更加精简.

指定 autoInstall:真 在一个环境中 semantic.json 配置将在运行时防止任何用户提示 npm安装 允许自动部署.

调光器的信息
调光器分联箱

友情链接: 1 2 3 4 5 6 7 8 9