创建新项目（高级）

对于需要有更强定制性的开发者，可以采取自行配置的方式引入 QMUI Web。自行配置的方式适用于需要修改项目目录名等定制性较强的情况。如果使用这种开发方式，那么项目中的目录结构需要手工创建，但目录名可以自行取名，只需要修改配置表即可（下面会介绍如何使用配置表）。

挂载 QMUI 为 SVN 外部库

创建项目的第一步，是引入 QMUI 的框架文件，建议采取 Git submodule 或 SVN 外部库的方式引入，这是希望把 QMUI 的源码修改与项目源码修改隔离开，达到互不干扰的效果。根据上面的项目结构要求，QMUI 框架应该引入到 UI_dev/qmui_web 目录中（如果 UI_dev 也可以修改为其他名称，这里只是要求目录层级如此）。

QMUI 采用 npm 进行 node 包管理，因此你还需要使用 npm 安装 QMUI 依赖的 node 包，请在 UI_dev/qmui_web 目录下执行以下命令（QMUI Web 所有相关命令都在 qmui_web 目录下执行）：

  1. #使用 npm 安装依赖包，待安装完毕后才可继续进行下一步
  2. npm install

使用配置文件

在 qmui_web（QMUI Web 框架根目录）中，有一个配置文件 qmui.config.js，在项目开始之前应该把配置文件复制到 qmui_web 的上一层目录（按推荐的文件结构，应该是 UI_dev 目录），用于框架在 Gulp 这一层的配置。

具体地说，qmui.config.js 配置 Gulp 在使用时的一些依赖的变量，如果开发时使用的就是框架所推荐的文件结构，那么基本上只需要配置 project 和 prefix 两个参数即可。详细的配置选项如下：

  • project 项目名称，暂时没有被实际用到，只是预留接口
  • prefix 代码前缀，用于在样式和 HTML 中创建 class 的命名前缀，即命名空间，必须根据项目名称定好一个清晰不容易与其他项目冲突的前缀
  • resultCssFileName 项目主样式文件的名称，在创建新项目时会被用到，一般来说，QMUI 建议如果项目不是非常大的量级，都只使用一个样式表，方便代码管理
  • cleanFileType 执行 gulp clean 命令时需要清除的文件
  • needsSourceMaps 是否需要支持 Css Source Maps。
  • needsImagesMinAndSync 是否需要压缩图片功能。
  • 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）下方可产生作用。
  • htmlSourcePath 静态模板来源目录，即模板开发的目录
  • imagesSourcePath 图片文件来源目录，即图片开发的目录
  • htmlResultPath 静态模板经 Gulp 处理后输出的目录，即把 include 合并后的输出版本
  • imagesResultPath 图片文件经 Gulp 处理后输出的目录，即最终实际被项目使用的图片资源
  • independentImagesDirectory 独立图片的开发目录的目录名，QMUI 会根据这个目录名在 imagesSourcePath 目录中生成一个子目录
  • styleResultPath 样式表经 Gulp 处理后输出的目录
  • openIncludeFunction 是否开启模板 include 引擎，默认开启
  • includePrefix include 引擎所使用的前缀，它影响了所有 include 方法的使用，默认为 @@

其中 htmlSourcePath imagesSourcePath htmlResultPath imagesResultPath browserSyncWatchPath browserSyncServerRoute 这六个选项都是项目资源的路径配置选项，若要修改，请注意相对路径是以 qmui_web 目录为 Base Path。

执行创建新项目命令

最后一步就是执行创建新项目的命令，只需在 qmui_web 目录下执行一句命令。项目创建完毕后控制台会有提示。

  1. gulp init

创建新项目成功效果图

用户个人配置

考虑到每位开发者可能有自己的开发习惯，因此除了项目中的 qmui.config.js，QMUI 还支持每位开发者在本地建立个人的配置表，例如项目中的 qmui.qmui.config.js 的 needsSourceMaps 被统一设置为 true，因此这时所有开发这个项目的成员都会默认使用 Source Maps 的功能，但项目成员中有开发者希望关闭这个功能，那么这位成员可以在 qmui.qmui.config.js 平级建立一个 config.user.js 文件，把 needsSourceMaps 设置为 false，那么 QMUI 会优先以 config.user.js 中的值为准。需要注意的是，config.user.js 应当在本地建立和使用，不应该提交到版本管理中，否则也会影响其他项目成员。