QMUI 中的各种工具方法已经预先集成为一个工作流,包括监控 Sass 文件并自动编译,样式优化(浏览器兼容自动处理等),雪碧图处理,模板 include 能力(可以传参和使用条件判断),图片压缩,文件清理等功能。
各个命令都是在 qmui_web 文件夹中调用对应的 Gulp 命令即可,部分命令依赖于 qmui.config.js 的配置。但实际使用时大部分操作都无需手工调用,QMUI 中已经根据工作流程设置好对应 Watch 机制(文件监控),包括上面提到的 Sass 编译,样式优化,雪碧图处理,模板 include 编译,浏览器自动刷新,图片压缩以及同步图片文件夹等大部分的功能。除了清理文件和合并变更文件两个任务,这两个任务的使用会在下面额外详述。
因此常规的使用流程只需要一句命令
#开启默认任务,文件监控会自动完成绝大部分常规操作
gulp
如果有特殊情况,需要手工调用 Gulp 中 Watch 会自动调用的方法,请务必先关闭 Gulp 的监听,否则可能会产生冲突。
QMUI 中集成了基于 postcss-lazysprite 和 postcss-svg-sprite 的雪碧图自动处理,使用时只需要在 UI_dev/project/images 中建立一个图片文件夹,把需要的图片放入,QMUI 会按规则生成所有的 CSS 以及雪碧图文件。以本 Demo 中使用到的雪碧图为例,创建时需要如下步骤:
@lazysprite "icons#icon"; /* 普通图片 */
@svgsprite "svgIcon"; /* SVG 图片 */
/* 普通图片输出 */
.dm_icon{
display: inline-block;
overflow: hidden;
font-size: 0;
line-height: 0;
}
.dm_icon_BannerLogo {
background-image: url(../images/icons.7fc7e2bab2.png);
background-position: 0 0;
width: 160px;
height: 160px;
}
.dm_icon_BannerMobileLogo {
...
}
/* SVG 图片输出 */
.dm_svgIcon {
background: url("../images/svgIcon.svg") left top no-repeat;
display: inline-block;
overflow: hidden;
font-size: 0;
line-height: 0;
vertical-align: top;
}
.dm_svgIcon_AppExmail {
width: 40px;
height: 40px;
background-position: -128px -122px;
}
.dm_svgIcon_AppPermissionWorknote {
...
}
QMUI 提供了轻量实用的模板引擎,除了支持基础的 include 功能以外,还支持条件判断以及变量传递,即在调用 include 方法时可以传递任意自定义的变量,在被 include 的模板中可以获取这些变量对应的值,并利用这些值来进行条件判断,支持 Number,Boolean, String,Object 几种变量类型。另外,不希望被编译输出的文件(例如被 include 的文件通常不希望被编译输出),使用 _ 作为文件名开头即可,例如:
<!-- _header.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>&&title</title>
<link rel="stylesheet" type="text/css" href="../public/style/css/main.css" />
<meta name="description" content="&&meta.description" />
<meta name="keywords" content="&&meta.keywork" />
</head>
<body class="frame_wrap">
<div class="frame_head">
&&if ( typeof index !== 'undefined') {
<h1 class="frame_head_title">
<a class="frame_head_title_link" href="./start.html">QMUI Web</a>
</h1>
}
&&if ( typeof index === 'undefined') {
<div class="frame_head_title">
<a class="frame_head_title_link" href="./start.html">QMUI Web</a>
</div>
}
</div>
<!-- start.html -->
&&include('./_header.html', {
"index" : true,
"title": "QMUI Web",
"meta": {
"keywork": "QMUI Web,QMUI,UI 开发,QMUI Web 官网,前端工作流,UI 开发框架",
"description": "一个旨在提高 UI 开发效率,快速产生项目 UI 的前端框架"
}
})
<div class="frame_cnt">正文内容</div>
<div>页脚</div>
</body>
</html>
<!-- start.html(输出结果) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QMUI Web</title>
<link rel="stylesheet" type="text/css" href="../public/style/css/main.css" />
<meta name="description" content="一个旨在提高 UI 开发效率,快速产生项目 UI 的前端框架" />
<meta name="keywords" content="QMUI Web,QMUI,UI 开发,QMUI Web 官网,前端工作流,UI 开发框架" />
</head>
<body class="frame_wrap">
<div class="frame_head">
<h1 class="frame_head_title">
<a class="frame_head_title_link" href="./start.html">QMUI Web</a>
</h1>
</div>
<div class="frame_cnt">正文内容</div>
<div>页脚</div>
</body>
</html>
这个例子中,_header.html 作为一个公共模块,被 start.html include,然后再由 Gulp 处理生成最终的页面。这里为了避免 gulp 起效,使用了"&&"代替"@@",实际上 QMUI 中使用的 include 引擎的默认前缀为 @@,即所有的方法和变量都以 @@ 开头。这个前缀以及是否开启 include 引擎都可以在 qmui.config.js 中配置。
另外值得注意的是,如果一个变量在某些模板中需要省略不写(例如一个布尔值,默认设定为 false,大部分的页面按需求都是 false 因此都不写),那么在使用这个变量进行条件判断时,需要先用 javascript 的 typeof 方法判断变量是否 undefined 再进行其他判断,否则 Gulp 会报 warning。
browserSyncMod
BrowserSync 的运行模式,默认为 'server',即本地服务器模式,'proxy' 为代理模式,'close' 表示不开启本功能。browserSyncPort
自定义端口,默认为3030。请注意避免使用常用端口以及其他本地已占用的端口,包括在代理模式(proxy)下不能与代理对象使用相同的端口。browserSyncShowLog
是否在显示 BrowserSync 的日志,默认为 false,即不显示日志。browserSyncStartPath
开启 BrowserSync 后的默认打开的路径。browserSyncHost
自定义开启 BrowserSync 后的默认 IP,可填写域名。为空则默认为 localhost。开启 BrowserSync 后,浏览器地址栏会自动打开 browserSyncHost + browserSyncStartPath 合并后的网址。browserSyncWatchPath
要监控变动的文件目录,一旦该目录下文件产生变动则自动刷新浏览器。browserSyncServerRoute
自定义路由,把项目中的目录结构定义成指定的路由,本地服务器模式(server)下方可产生作用。browserSyncProxy
需要进行代理的代理地址,代理模式(proxy)下方可产生作用。清理文件任务用于快速删除一些无用文件,需要手工调用。默认的配置是删除 UI_dev(qmui_web 上一层目录)的 .sass-cache 目录。qmui.config.js 中的 cleanFileType
可以控制具体要删除的文件。
#清理文件命令
gulp clean
合并变更文件是一个手工调用的方法。可以将模板文件中的 <link> <script>文件按指定规则合并,并变更文件引用。具体使用步骤如下:
具体例子如下:
// qmui.merge.rule.js
{
"../public/js/all.js" : ["../public/js/lib.js", "../public/js/function.js", "../public/js/index.js"]
}
<!-- test.html gulp merge 执行之前的页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
</head>
<body class="frame_wrap">
<script src="../public/js/lib.js"></script>
<script src="../public/js/function.js"></script>
<script src="../public/js/index.js"></script>
</body>
</html>
<!-- test.html gulp merge 执行之后的页面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
</head>
<body class="frame_wrap">
<script src="../public/js/all.js"></script>
</body>
</html>