这套工作流与其叫工作流这么高大上的名字，我更愿意叫它基础库。如它的名字一样，它就是用来作为项目的基础，在良好的基础上开发的项目，才像是站在巨人的肩膀上，才能保证项目的质量与效率。

此外因为是针对移动端（尤其是活动类项目）开发的基础库，技术选型还算简单，尤其适合初入移动端以及刚做移动端不久的前端人，即使做了一段时间的移动端，了解这套基础库的架构和功能实现，或许也有增益。

接下来让我们来了解这个基础库的各个方面。

在正式去了解这套基础库前，首先介绍它的技术选型，让你有个大概的了解。

• zepto.js + deferred.js + callbacks.js + touch.js（库）
• flexible.js（移动端rem适配方案）
• handlebars（模板引擎）
• gulp（自动化构建工具）
• sass（预处理器语言）

基础库实现的功能

看完技术选型后，看看它能实现哪些功能，是否满足你的需求。

1. Sass编译
2. Css Js 图片压缩
3. Css Js 合并
4. Css Js 内联
5. Html的include功能
6. 自动刷新
7. 去缓存
8. 提供Handlebars模板文件的预编译
9. 提供常用功能函数
10. 雪碧图
11. ESLint
12. rem移动端适配方案
13. 内置样式与WeUI样式相同的loading、dialog组件

OK, 如果你决定尝试下这套基础库，首先要确保你有相应的环境，下面这些是步骤：

1.下载，安装

2.安装cnpm，实际上你只用在终端执行下面这句命令就可以了。

    cnpm install --global gulp

基础库代码获取

安装完环境，我们需要获取代码，获取代码有两种方式：

1.

    git clone git@github.com:mqyqingfeng/lnv-mobile-base.git

2.yeoman

效果如图：

输入项目名称，会以输入的项目名称建立文件夹，基础库的代码会自动创建。

获取文件后，进入文件根目录，请记住，在全部的使用中，就俩命令：

1.开发时使用：

    gulp

2.最终构建：

    gulp build

当你执行gulp build命令后，会自动压缩、合并、内联、去缓存，这是最终的上线版本。

基础库目录结构

在介绍基础库的各个功能之前，首先了解一下目录结构。

src下:

执行gulp命令后， 会生成目录

├── dev/                        # dev目录
    └── font                       # 字体文件目录
    └── img                       # 图片目录
    └── js                        # js
    └── css                        # css目录
    └── static                   # 静态资源目录
    └── tpl                        # handlebars模板目录
    └── widget                   # 组件目录
    └── index.html                 # index.html

执行gulp build命令后, 会生成build目录

├── build/                      # 构建目录
    └── combined                   # 合并后的文件目录
    └── img                       # 图片目录
    └── js                        # js
    └── css                        # css目录
    └── static                   # 静态资源目录
    └── index.html                 # index.html

注意dev目录是通过src目录生成的，任何时候都不要直接更改dev目录里的内容！！！

而build目录是最终构架出的目录，是最终要在线上使用的版本。