内置工作流 - QMUI Web

工作流的使用

QMUI 中的各种工具方法已经预先集成为一个工作流，包括监控 Sass 文件并自动编译，样式优化（浏览器兼容自动处理等），雪碧图处理，模板 include 能力（可以传参和使用条件判断），图片压缩，文件清理等功能。

各个命令都是在 qmui_web 文件夹中调用对应的 Gulp 命令即可，部分命令依赖于 qmui.config.js 的配置。但实际使用时大部分操作都无需手工调用，QMUI 中已经根据工作流程设置好对应 Watch 机制（文件监控），包括上面提到的 Sass 编译，样式优化，雪碧图处理，模板 include 编译，浏览器自动刷新，图片压缩以及同步图片文件夹等大部分的功能。除了清理文件和合并变更文件两个任务，这两个任务的使用会在下面额外详述。

因此常规的使用流程只需要一句命令

#开启默认任务，文件监控会自动完成绝大部分常规操作
gulp

Gulp 任务效果图

如果有特殊情况，需要手工调用 Gulp 中 Watch 会自动调用的方法，请务必先关闭 Gulp 的监听，否则可能会产生冲突。

雪碧图处理

QMUI 中集成了基于 postcss-lazysprite 和 postcss-svg-sprite 的雪碧图自动处理，使用时只需要在 UI_dev/project/images 中建立一个图片文件夹，把需要的图片放入，QMUI 会按规则生成所有的 CSS 以及雪碧图文件。以本 Demo 中使用到的雪碧图为例，创建时需要如下步骤：

在 UI_dev/project/images 中建立 icons 和 svgIcon 目录，分别放置所需的普通图片和 SVG 图片。

在样式文件需要输出雪碧图 CSS 的地方添加如下代码：

@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 {
    ...
}

使用 icon 只需在 HTML 中使用对应的 class：

可以看出输出的 Class-name 由项目前缀 + 目录名 + 图片名组成。
“icons#icon” 中的 icon 表示目录名缩写，设置了该目录名缩写则输出的 class 中使用该缩写，不设置则默认使用目录名。
普通图片多倍图处理只需要在 icons 目录中加入文件名带 "_2x/@2x"，“_3x/@3x” 这类后缀的多倍图文件即可，框架也会自动输出对应的样式以及雪碧图文件。
如需定制雪碧图功能，可以分别查看 postcss-lazysprite 的 options 和 postcss-svg-sprite 的 options，根据需要自行调整 QMUI 的相关源码。
完整的雪碧图效果展示页面请浏览 Sprite Demo。

模板引擎

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。

浏览器自动刷新

QMUI 带有基于 BrowserSync的浏览器自动刷新功能，同时支持本地服务器模式（server）和代理模式（proxy）。

本地服务器模式（server）适合静态页面的开发，也是默认的模式，代理模式（proxy）则适合本身有本地服务的动态页面的开发（如本地的 Node.js 服务，PHP 本地开发）。详细的配置可以通过调整 qmui.config.js 中对应的配置项，相关配置条目说明如下：

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_web 目录中的 qmui.merge.rule.js 复制到上一层目录（即 UI_dev）
按自身项目需要在 qmui.merge.rule.js 中写好文件合并规则，其中 key 为合并得到的最终文件（格式为字符串），value 为需要被合并的文件（格式为 glob），所有的路径均以模板中实际的文件引用路径为准（可参考下面的例子）
在 qmui_web 目录执行命令 gulp merge 即可合并

具体例子如下：

// 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>