针对移动端的前端工做流

时间 2019-11-11

标签针对移动端的前端栏目无线繁體版

原文原文链接

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

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

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

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

基础库技术选型

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

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

基础库实现的功能

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

Sass编译
Css Js 图片压缩
Css Js 合并
Css Js 内联
Html的include功能
Autoprefixer
自动刷新
去缓存
提供Handlebars模板文件的预编译
提供经常使用功能函数
雪碧图
ESLint
rem移动端适配方案
内置样式与WeUI样式相同的loading、dialog组件

基础库的环境安装

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

1.下载nodejs，安装gulp

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

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

3.安装gulp，一样你须要执行下面这句命令。sass

cnpm install --global gulp

基础库代码获取

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

1.github

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

2.yeoman

cnpm install -g yo

    cnpm install -g generator-lnv-mobile

    yo lnv-mobile

效果如图：

yeoman.png

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

基础库运行

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

1.开发时使用：

gulp

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

2.最终构建：

gulp build

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

基础库目录结构

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

src下:

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

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

├── 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 # 静态资源目录 └── widget # 组件目录 └── index.html # index.html

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

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

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

本文转至简述app