菠萝贷技术简介

项目结构

在项目tmt-workflow的基础上进行修改开发,但是比其简单的多,项目布局如下:


.bld(菠萝贷)
├── .idea(.vscode) // 编辑器配置文件(可忽略)
├── bower_components // bower依赖下载目录
│ ├── angular // angular前端框架
│ ├── artTemplate // 腾讯模板引擎
│ ├── hammer // 移动手势插件等
│ ├── fastClick // fastClick
│ ├── Swiper // 轮播图插件等
│ ├── ……… // ………
├── build // 本地浏览器运行资源目录
│ ├── css // css样式
│ ├── image // 图片目录
│ ├── js // js脚本目录
│ ├── view // 页面组件模板
│ ├── vendor //等同于bower_components
│ ├── index.html // 主界面
│ ├── /.html // 其它主界面
├── dist // 等同于build(发布上线目录,经各种代码优化)
├── node_modules // npm 依赖
│ ├── gulp // gulp
│ ├── gulp // gulp
│ ├── gulp-less // gulp-less
│ ├── ……… // ………
│ ├── ……… // ………
│ ├── ……… // ………
├── src // 源码目录
│ ├── image // 图片
│ │ ├── funicom // 精灵图
│ │ ├── index // 对应各主页图片
│ │ ├── ……… // ………
│ ├── js // 脚本
│ │ ├── env.js // 环境切换配置
│ │ ├── fetch.js // 获取数据
│ │ ├── mUtils.js // 常用的js方法
│ │ └── rem.js // px转换rem
│ ├── less // less
│ │ ├── mixin.less // css常用函数
│ │ ├── base.less // css常用样式
│ │ ├── property.less // css自定义属性
│ │ └── var.less // css自定义变量
│ │ └── index // 对应各主界面样式
│ │ └── ……… // ………
│ │ └── ……… // ………
│ ├── view // 可复用页面组件
│ │ ├── banner .html // 可复用banner组件
│ │ ├── proList.html // 子页面
│ │ └── ……… // ………
│ │ └── ……… // ………
│ ├── index.html // 主界面
│ ├── /
.html // 其他界面
├── .babelrc // babel配置文件
├── .babelrc // eslint配置文件.gitignore
├── . gitignore // 上传到git服务器忽略文件
├── bower.json // bower配置文件
├── gulpfile.js // 项目最核心文件
├── package.json // npm配置文件(次核心)
├── postcss.config.js // css自动前缀配置文件

至此,整个项目布局一览无余。运行此项目前提是计算机安装了nvm、node、npm以及gulp。最核心文件gulp和次核心文件package.json其实都是有关于前端开发环境。以gulp.js其中抽取的部分核心代码为例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
;(function () {
// 加载gulp等插件
var gulp = require('gulp');
// 定义项目路径
var app = {
srcPath: 'src/',
};
//定制gulp任务
gulp.task('js', function() {
.pipe($.plumber())
.pipe($.uglify())
.pipe($.connect.reload());
});
gulp.task('serve', ['js',…rest], function() {
$.connect.server({
root: [app.devPath],
livereload: true,
port: 3000
});
open('http://localhost:3000');
gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
});
// 执行gulp默认命令
gulp.task('default', ['serve']);
})();

简单分析:以node为代理服务器通过gulp工具让前端开发模拟线上环境开发。优点是css自动填充兼容性前缀,本地热更新,提升开发效率等。缺点是不易上手。前端开发环境定制性高,各种环境配置确实是比较折腾。

Recommended Posts