ZUI中提供了众多丰富的web组件,几乎为你准备构建现代Web应用所有基础内容。但大部分场景并不需要所有组件,所有并没有将所有内容打包为一个CSS文件和一个JS文件,在标准版中仅包含精心选择的组件,这些组件用于绝大部分场景。
在构建轻量的应用时需要的内容更少。ZUI预编译版本中提供了一些简洁的版本。包含了ZUI中大部分常用内容,经过压缩后体积更小。你可以在dist目录下找到文件名包含'.lite'的文件记为简洁的版本。
ZUI中提供了众多丰富的web组件,几乎为你准备构建现代Web应用所有基础内容。但大部分场景并不需要所有组件,所有并没有将所有内容打包为一个CSS文件和一个JS文件,在标准版中仅包含精心选择的组件,这些组件用于绝大部分场景。
在构建轻量的应用时需要的内容更少。ZUI预编译版本中提供了一些简洁的版本。包含了ZUI中大部分常用内容,经过压缩后体积更小。你可以在dist目录下找到文件名包含'.lite'的文件记为简洁的版本。
在标准版中包含绝大部分常用组件。预编译的标准版包含以下文件:
zui/
└── dist/
├── css/ CSS文件
│ ├── zui.css
│ ├── zui.min.css
│ └── zui.map.css
├── js/ Javascript文件
│ ├── zui.js
│ └── zui.min.js
└── fonts/ 图标字体文件
├── zenicon.eot
├── zenicon.ttf
├── zenicon.woff
└── zenicon.svg
在简洁版中包含大部分常用组件。标准版中已包含简洁版的所有内容。预编译的简洁版包含以下文件:
zui/
└── dist/
├── css/ CSS文件
│ ├── zui.lite.css
│ ├── zui.lite.min.css
│ └── zui.lite.map.css
├── js/ Javascript文件
│ ├── zui.lite.js
│ └── zui.lite.min.js
└── fonts/ 图标字体文件
├── zenicon.eot
├── zenicon.ttf
├── zenicon.woff
└── zenicon.svg
一些组件可能既不包含在标准版中,也没有包含在简洁版中,使用时只需要按需引用对应的资源文件即可。你可以在以下目录中找到独立组件包含的资源文件:
zui/
└── dist/
└── lib/ 独立加载的组件
├── chosen/ Chosen组件
├── datetimepicker/ 日期时间选择组件
├── datatable/ 数据表格组件
└── ... 更多组件....
ZUI包含的很多独立组件都需要jQuery和ZUI的其他基础插件支持,所以尽量配合jQuery和ZUI标准版或简洁版来使用。
组件清单帮助你快速查找所需的组件是否包含在指定版本中。
组件 | 标准版 | 简洁版 | 独立组件 | 版本要求 |
---|---|---|---|---|
正在加载列表... |
ZUI使用 Gulp 作为构建系统。如果不了解 Gulp 也没有关系,Gulp是一个非常棒而且容易上手的工具。下面给出简要步骤来准备编译ZUI,如果想了解更多请访问Gulp官方网站。
Gulp构建在nodejs之上。在安装Gulp之前需要首先下载并安装node.js。最新版的nodejs已包含npm(node packaged modules)。npm是nodejs用来管理扩展包的工具。
安装nodejs之后,在命令行进行如下操作:
npm
install
命令。nmp将读取包配置文件package.json
文件并自动安装Gulp和所有依赖的扩展包。完成上述步骤就可以进行编译了。只需要进入ZUI中使用命令行输入对应的命令就可以启动编译任务。内置的build
命令可以完成大部分编译任务。以下为ZUI内置的一些常用任务命令。
命令 | 说明 | 输出目录 |
---|---|---|
gulp build -standard |
编译标准版 |
|
gulp build -lite |
编译简洁版 |
|
gulp build -dist |
编译标准版和简洁版以及常用独立组件 |
|
gulp dist |
gulp build -dist 的简单写法 |
|
gulp build -doc |
编译文档所需资源 |
|
gulp build -theme |
编译主题 |
|
gulp build -[build name] |
编译独立组件包,[build
name] 为组件包名称,可以为calendar 、kindeditor 、chosen 等 |
|
gulp build -[control name] |
编译单独控件,[control
name] 为控件名称,可以为button 、alerts 、panels 等 |
|
gulp watch:doc |
监听src/ 目录下的文件变更,当文件发生更改之后立即调用 gulp build -doc 命令。 |
|
gulp watch:dist |
监听src/ 目录下的文件变更,当文件发生更改之后立即调用 gulp build -dist 命令。 |
|
gulp watch:theme |
监听src/ 目录下的文件变更,当文件发生更改之后立即调用 gulp build -theme 命令。 |
|
gulp prettify:js |
整理并优化src/ 目录下所有javascript源码文件的代码格式。 |
你也可以通过编辑gulpfile.js
文件来定义自己的编译任务。
你可以在ZUI源码根目录新建一个gulpfile.custom.js
文件,然后在此文件中自定义更多的gulp任务。
// 文件:gulpfile.custom.js
// 必须导出一个函数 function(gulp, $)
module.exports = function(gulp, $) {
// 自定义gulp任务'hello'
gulp.task('hello', function() {
console.log('hello world!');
});
// 第二个参数 $ 包含gulpfile.js中大部分可用工具函数和数据
// $: {
// less: less,
// cssmin: cssmin,
// csscomb: csscomb,
// autoprefixer: autoprefixer,
// concat: concat,
// header: header,
// uglify: uglify,
// rename: rename,
// change: change,
// sourcemaps: sourcemaps,
// prettify: jsbeautifier
// buildBundle: buildBundle,
// zui: zui,
// pkg: pkg,
// del: del,
// mkdirp: mkdirp,
// runSequence: runSequence
// }
};