亚信UED前端流程自动化构建工具

时间  2019-11-17
标签 ued 前端 流程 自动化 构建 工具 栏目 快乐工作 繁體版
原文   原文链接

亚信UED前端流程自动化构建工具

aiflow 亚信 gulpcss

项目由亚信CMC UED团队建立，用于解决前端项目构建的流程管理，以及复杂度问题解决。html

1. 项目初始化，安装相关依赖

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
npm install

2. 启动服务

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
npm start

3. 相关配置说明

3.1 服务端口

配置文件路径：
src/common/config/config.js前端

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
export default { port: 1234}

框架默认的端口号为：1234
服务启动后，便可经过: localhost:1234 访问jquery

3.2 项目配置

路径：
// 系统初始项目配置
src/common/config/initpro.js
// 以 aipro 为前缀命名
src/common/config/aiproxxxx.js
// 如：
src/common/config/aipro_liyz.js
...web

  
  
  
  
    
   
   
   
   
  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. 
   
   
   
   
  27. 
   
   
   
   
  28. 
   
   
   
   
  29. 
   
   
   
   
  30. 
  
  
  
  
export default { 'pro': [ { // 项目编号，值必须惟一，用于标记项目的惟一性属性 sn: '2016-SN12', // 项目工程名称，必须惟一 name: 'gqkuandai', // 项目标题 title: '陕西宽带国庆活动', // 项目类型： web or wap type: 'web', // 项目展现平台： pc or phone dev: 'pc', // 项目日期 date: '2016-10-09', // 展现平台为 phone 时， 单位 px 转 rem 时的换算单位。 // 当展现为 phone 外的其余值时，不考虑该配置值。 // 取值以设计稿的最大宽度为依据，分为10份， // 取其中一份为 remUnit 值。 // 如设计稿最大宽度为 750px，此只 remUnit 的配置值为： 750 / 10 = 75 remUnit: 75, // less\css\sass\postcss // 当前仍只支持前两种 compileCss: 'less', // SVN地址 svn: '' }, //... ]}

多个项目，以数组方式配置在这个数组中。npm

4. 相关任务流程

任务参数包括：
pro 指定任务所对应的项目名称，对应于项目配置中的 pro.name；
sn 指定任务所对应的项目编号，对应于项目配置中的 pro.sn；json

4.1 初始化任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp init --pro gqkuandai# orgulp init --sn 2016-SN12

以上两个命令等效。
执行的结果中，会对于项目的文件夹初始结构构建完成，并包含有相关的基础性代码。gulp

  
  
  
  
    
   
   
   
   
  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. 
   
   
   
   
  27. 
   
   
   
   
  28. 
   
   
   
   
  29. 
   
   
   
   
  30. 
   
   
   
   
  31. 
  
  
  
  
src |-gqkuandai |-config |-data.js |-controller |-app.js |-base.jsview |-gqkuandai |-public |-block |-head_all.html |-head_wap.html |-head_web.html |-frame |-app_index.htmlwww |-static |-gqkuandai |-src |-css |-less |-... |-src |-... |-images |-... |-js |-comm.js |-lib |-...

4.2 项目监控任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
   
   
   
   
  7. 
  
  
  
  
gulp default --pro xxxx# or gulp --pro xxxx# orgulp default --sn xxxx# or gulp --sn xxxx

用于监控项目开发过程当中，项目代码的变更，实现实时编译、刷新及浏览器同步，浏览器的同步服务端口号为：3000数组

4.3 项目编译任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp make --pro xxxx# orgulp make --sn xxxx

用于编译开发过程当中，模块化样式编写方式时，将各分文件合并，并解析其样式变量等。浏览器

4.4 项目发布任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp dist --pro xxxx# or gulp dist --sn xxxx

当项目开发完成后，咱们模块化开发方式的各文件经过编译及解析，并将相关文件统一打包为ZIP文件，完整输出静态文件，以此来规避发布过程当中的犯错机率，以及分发时的方便性快捷性。

4.5 项目归档任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp archive --pro xxxx# orgulp archive --sn xxxx

在IDE开发工具中，因各项目不断积累，致使IDE工具创建索引过多，而致使工具变慢，归档操做是将相关的项目源码归档到能够设置为忽略建索引的目录（本项目是设置位置为：./archive）。
项目归档后，咱们能够将原项目开发目录删除，减小IDE在索引计算上的开销，以此来提高IDE的响应速度。
为了快速完成该动做，插件中支持了一个快速操做的任务： archive:del，该任务执行的操做是，将项目源码归档到 archive 目录后，再将原开发目录中的相关内容删除。（请慎重使用该任务）

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp archive:del --pro xxxx# orgulp archive:del --sn xxxx

4.6 项目重加载任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp reload --pro xxxx# orgulp reload --sn xxxx

这是归档任务的反操做，当咱们将某一项目归档处理后，可能后期的某个时间点，咱们仍须要处理这个项目，但当前的项目文件已被归档，开发IDE对于它已不工做，所以，这里经过这个任务，从新将已归档的任务从新加载到环境中。

4.7 项目删除任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp delpro --pro xxxx# orgulp delpro --sn xxxx

用于删除某一个项目源码。
本操做须要很是当心，除非十分明确，本项目的源码已再也不须要，不然请不要执行本任务。本操做的执行结果，会完全清空该项目的源码，清除后，没法恢复。
当不太肯定是否还须要该项目的源码存在于IDE中时，但又不想该项目的相关代码对本身当前工做产生干扰，此种状况下，最好选择归档操做。

4.8 自动化构建工具源码发布任务

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
gulp release

此时，任务会将当前自动化构建工具源码执行编译打包源码，并使用package.json中的相关配置信息生成相关的版本号等信息命名格式的发布文件。
发布所在的目录路径为： 

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
  
  
  
  
releases/0.0.x/*releases/aiui-frame-0.0.x-2016xxxxxxxxxx.zip

4.9 项目列表任务

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
gulp list

当总体的项目工程中，任务配置数量经积累较多后，整个工程中的项目会不少，在某个时候咱们有可能须要查看工程中全部的项目信息，这时，能够经过该任务查看工程中的项目列表信息。

如：

  
  
  
  
    
   
   
   
   
  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. 
  
  
  
  
gulp list[00:43:54] Requiring external module babel-register[00:43:54] Working directory changed to C:\project\aiui_dev==================================================================-- 项目列表[00:43:56] Using gulpfile C:\project\aiui_dev\gulpfile.babel.js[00:43:57] Starting 'list'...-------------------------------------------------------------------- 框架初始化样例项目 项目信息------------------------------------------------------------------Project title:: 框架初始化样例项目Project SN:: 2016-PI001Project Name:: initSurport Device Type:: pc-------------------------------------------------------------------------------------------------------------------------------------- 陕西网厅客户关怀平台 项目信息------------------------------------------------------------------Project title:: 陕西网厅客户关怀平台Project SN:: 2016-SN03Project Name:: sxwtSurport Device Type:: pc------------------------------------------------------------------[00:43:57] Finished 'list' after 11 ms

以上是 list 任务的一个完整输出的实例。

4.10 某项目包含页面列表任务

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
gulp listpages

用于列出某一项目中，包含的全部页面配置信息。

  
  
  
  
    
   
   
   
   
  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. 
   
   
   
   
  27. 
   
   
   
   
  28. 
   
   
   
   
  29. 
   
   
   
   
  30. 
  
  
  
  
gulp listpages --pro sxwt[00:56:42] Requiring external module babel-register[00:56:42] Working directory changed to C:\project\aiui_dev==================================================================-- sxwt 项目包含页面列表-------------------------------------------------------------------- Gulp task params------------------------------------------------------------------Project title:: 陕西网厅客户关怀平台Project SN:: 2016-SN03Project Name:: sxwtDevice Type:: pc------------------------------------------------------------------[00:56:45] Using gulpfile C:\project\aiui_dev\gulpfile.babel.js[00:56:45] Starting 'listpages'...-------------------------------------------------------------------- 陕西网厅客户关怀平台 项目页面信息---------------------------------------------------------------------- Page title:: 陕西网厅首页-- Page file name:: index.html------------------------------------------------------------------------------------------------------------------------------------------ Page title:: 陕西网厅E币福利-- Page file name:: fuli.html--------------------------------------------------------------------[00:56:45] Finished 'listpages' after 176 ms

从以上实例能够看到，当前项目中包含两个页面：index.html fuli.html

4.11 项目信息搜索任务

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
gulp search --key xxxx

本任务用于在项目列表搜索包含相应关键词的项目。
其中的关键词能够指向的搜索范围是：
项目标题、项目序列号、项目名称

如：

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
   
   
   
   
  7. 
   
   
   
   
  8. 
   
   
   
   
  9. 
   
   
   
   
  10. 
   
   
   
   
  11. 
   
   
   
   
  12. 
   
   
   
   
  13. 
   
   
   
   
  14. 
   
   
   
   
  15. 
   
   
   
   
  16. 
   
   
   
   
  17. 
   
   
   
   
  18. 
   
   
   
   
  19. 
  
  
  
  
gulp search --key 陕西[01:00:38] Requiring external module babel-register[01:00:38] Working directory changed to C:\project\aiui_dev==================================================================-- 搜索项目[01:00:41] Using gulpfile C:\project\aiui_dev\gulpfile.babel.js[01:00:41] Starting 'search'...-- 搜索关键词为:: 陕西-------------------------------------------------------------------- 陕西网厅客户关怀平台 项目信息------------------------------------------------------------------Project title:: 陕西网厅客户关怀平台Project SN:: 2016-SN03Project Name:: sxwtSurport Device Type:: pc------------------------------------------------------------------[01:00:41] Finished 'search' after 3.83 ms

以上为一个搜索关键词为：陕西，的项目搜索命令实例。

5. 项目开发流程

在全部工具提供出来后，所给出的最为重要的是一种解决问题的思路。
在本工具中，在开发项目过程当中设计了一种大致的任务流程。

流程为：

  1. 肯定项目基本信息，并配置好相关项目信息配置文件；
  2. 执行项目初始化任务，初始化自动生成相关项目目录结构及初始化文件；
  3. 分析项目页面组成，及各页面相关的数据配置；
  4. 项目开发及调试；

5. 开发完成，打包及发布；

如下将以陕西客户关怀项目为例，实例讲解使用过程

5.1 项目信息肯定及配置

项目信息为：

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
   
   
   
   
  7. 
   
   
   
   
  8. 
   
   
   
   
  9. 
  
  
  
  
项目编号： 2016-SN03项目名称： sxwt项目标题： 陕西网厅客户关怀平台项目类型： web针对设备： pc项目日期： 2016-09-18rem单元： 20SVN地址： ...

项目配置文件路径：

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
src/common/config/aipro_liyz.js

配置信息

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
   
   
   
   
  7. 
   
   
   
   
  8. 
   
   
   
   
  9. 
   
   
   
   
  10. 
   
   
   
   
  11. 
   
   
   
   
  12. 
   
   
   
   
  13. 
   
   
   
   
  14. 
   
   
   
   
  15. 
  
  
  
  
export default { 'pro': [ { sn: '2016-SN03', name: 'sxwt', title: '陕西网厅客户关怀平台', type: 'web', dev: 'pc', date: '2016-09-18', remUnit: 20, svn: '' },  //... ]}

5.2 项目初始化

在项目根目录下执行

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
gulp init --pro sxwt# orgulp init --sn 2016-SN03

5.3 分析面组成

首页： index
福利页： fuli

配置文件路径：

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
src/sxwt/config/data.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. 
   
   
   
   
  27. 
   
   
   
   
  28. 
   
   
   
   
  29. 
   
   
   
   
  30. 
   
   
   
   
  31. 
   
   
   
   
  32. 
   
   
   
   
  33. 
   
   
   
   
  34. 
   
   
   
   
  35. 
   
   
   
   
  36. 
   
   
   
   
  37. 
   
   
   
   
  38. 
   
   
   
   
  39. 
   
   
   
   
  40. 
   
   
   
   
  41. 
  
  
  
  
export default { 'pages': { index: { action: 'index', title: '陕西网厅首页', data: { 'curr': 'index', 'userInfo': { name: '星空', avatar: '/images/avatar_1.png', level: 6, levelName: '高手', levelImg: '/images/level_06.png', eNum: 388, curIntegral: 3001, nextLevelIntegral: 4000 }, 'duihuanList': [ { img: '/images/i_p_001.png', title: '10元话费', btText: '10E币兑换', validDate: '2016-09-19至2016-09-30', zhekou: '9.5折', count: '4582' },  //... ] } }, fuli: { action: 'fuli', title: '陕西网厅E币福利', data: { 'curr': 'fuli' } } }}// action 和 title 属性为必须，而且 action 与当前页面名称保持一致。// 其中的 data 属性为用户随意依需求定义，只须要语法正确便可。

5.4 项目开发及调试

相关的任务

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
  
  
  
  
# 控监任务 gulp --pro sxwt

固有变量说明：

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
   
   
   
   
  7. 
   
   
   
   
  8. 
   
   
   
   
  9. 
  
  
  
  
// 用于定义项目的全部静态资源路径的前缀，该变量只出如今 HTML 文档中{{proUrl}}// 以下图片的输出写法<img src="{{proUrl}}/images/banner.png"/>// 用于指定项目的页面访问连接前缀，只与咱们定义的各页面连接相关，如 index.html or fuli.html{{proUri}}// 以下导航栏上的连接写法<li class="app-index"><a href="{{proUri}}/index.html">首页</a></li>

页面文件新建路径为：

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
view/sxwt/xxx.html

页面的命名规范为：

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
  
  
  
  
# 以字母开头，字母、数字及下划线组成# 以 app_ 为前缀# 命名取配置文件中的名称，如首页的命名为：app_index.html# 福利页面的命名为：app_fuli.html

项目全部的静态资源存放位置：

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
   
   
   
   
  7. 
   
   
   
   
  8. 
   
   
   
   
  9. 
   
   
   
   
  10. 
  
  
  
  
# 根目录www/static/sxwt/src/# 图片www/static/sxwt/src/images/# csswww/static/sxwt/src/css/src/main.css# jswww/static/sxwt/js/comm.js# 公用库，如：jquery等www/static/sxwt/lib/

更为详细的语法，能够参考 thinkjs 的官方文档，包括其中的模块化写法，以及各模板变量的语法格式等。

5.5 项目打包发布

当项目代码编写开发完成后，相应的模块化开发的代码编译合并打包总体发布

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
gulp dist --pro sxwt

发布的文件路径为：

  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
  
  
  
  
www/static/sxwt/dist# 压缩文件www/static/sxwt/dist/2016-SN03.陕西网厅客户关怀平台-20161102104558.zip

5.6 工具自动升级

当在开发过程当中，发如今MAC类系统中，当解压文件到某个目录时，发现如若原来目录下不为空时，目录内的相关文件的默认操做不是合并，仍是直接覆盖，这样会致使原有文件丢失。
在这种状况下，我考虑到将软件的升级定义成一个自动化或是半自动化的过程。
操做过程：
1. 将最版本升级包（zip）下载到项目目录中的： releases ，目录。
2. 运行如下命令

  
  
  
  
    
   
   
   
   
  1. 
  
  
  
  
gulp update
  1. 运行结果相似以下内容
  
  
  
  
    
   
   
   
   
  1. 
   
   
   
   
  2. 
   
   
   
   
  3. 
   
   
   
   
  4. 
   
   
   
   
  5. 
   
   
   
   
  6. 
   
   
   
   
  7. 
   
   
   
   
  8. 
   
   
   
   
  9. 
   
   
   
   
  10. 
   
   
   
   
  11. 
   
   
   
   
  12. 
   
   
   
   
  13. 
  
  
  
  
C:\project\aiflow (master) (aiui-automation-workflow@0.0.8)λ gulp update[14:30:02] Requiring external module babel-register==================================================================-- 软件升级[14:30:06] Using gulpfile C:\project\aiflow\gulpfile.babel.js[14:30:06] Starting 'update'...-- 当前版本号:: 0.0.8-- 当前版本发布日期:: 20170215161606---- 当前版本已经是最新，无需升级！------------------------------------------------------------------[14:30:06] Finished 'update' after 11 ms
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程