针对移动端的前端工作流(1)—基础库概览

在移动端项目的开发中，我们会遇到诸如移动端技术选型、移动端适配、预处理器语言的使用规范和编译、各种繁琐的工作（压缩、合并、内联、雪碧图、CSS前缀……）等问题，在一遍又一遍的重复劳动中，我们需要一个能够结合最佳实践的项目初始文件，本套工作流就是以这个目的进行构建，旨在提高移动端项目开发效率。

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

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

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

基础库技术选型

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

  • 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. Autoprefixer
  7. 自动刷新
  8. 去缓存
  9. 提供Handlebars模板文件的预编译
  10. 提供常用功能函数
  11. 雪碧图
  12. ESLint
  13. rem移动端适配方案
  14. 内置样式与WeUI样式相同的loading、dialog组件

基础库的环境安装

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

1.下载nodejs，安装

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

  2.     npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装gulp，同样你需要执行下面这句命令。

  2.     cnpm install --global gulp

基础库代码获取

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

1.github

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

2.yeoman

  2.     cnpm install -g yo
  4.     cnpm install -g generator-lnv-mobile
  6.     yo lnv-mobile

效果如图：

yeoman安装预览图

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

基础库运行

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

1.开发时使用：

  2.     gulp

当你开启gulp命令后，不要关闭终端，gulp会监控src目录下的变化，根据文件的不同进行对应的操作。

2.最终构建：

  2.     gulp build

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

基础库目录结构

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

src下:

  2. ├── src/                        # 源文件
  3.     └── font                      # 字体文件
  4.     └── img                       # 图片
  5.     └── include                    # include文件
  6.     └── js                        # js
  7.     └── scss                        # scss
  8.     └── static                   # 静态资源
  9.     └── tpl                        # handlebars模板
  10.     └── widget                   # 组件
  11.     └── index.html                 # index.html

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

  2. ├── dev/                        # dev目录
  3.     └── font                       # 字体文件目录
  4.     └── img                       # 图片目录
  5.     └── js                        # js
  6.     └── css                        # css目录
  7.     └── static                   # 静态资源目录
  8.     └── tpl                        # handlebars模板目录
  9.     └── widget                   # 组件目录
  10.     └── index.html                 # index.html

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

  2. ├── build/                      # 构建目录
  3.     └── combined                   # 合并后的文件目录
  4.     └── img                       # 图片目录
  5.     └── js                        # js
  6.     └── css                        # css目录
  7.     └── static                   # 静态资源目录
  8.     └── widget                   # 组件目录
  9.     └── index.html                 # index.html

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

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

注意node_modules文件夹是不提交的！！！