无标题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无标题相关的知识,希望对你有一定的参考价值。

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

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

  1. npm install

2. 启动服务

  1. npm start

3. 相关配置说明

3.1 服务端口

配置文件路径:
src/common/config/config.js

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

框架默认的端口号为:1234
服务启动后,即可通过: localhost:1234 访问

3.2 项目配置

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

  1. export default {
  2. ‘pro‘: [
  3. {
  4. // 项目编号,值必须唯一,用于标记项目的唯一性属性
  5. sn: ‘2016-SN12‘,
  6. // 项目工程名称,必须唯一
  7. name: ‘gqkuandai‘,
  8. // 项目标题
  9. title: ‘陕西宽带国庆活动‘,
  10. // 项目类型: web or wap
  11. type: ‘web‘,
  12. // 项目展示平台: pc or phone
  13. dev: ‘pc‘,
  14. // 项目日期
  15. date: ‘2016-10-09‘,
  16. // 展示平台为 phone 时, 单位 px 转 rem 时的换算单位。
  17. // 当展示为 phone 外的其他值时,不考虑该配置值。
  18. // 取值以设计稿的最大宽度为依据,分为10份,
  19. // 取其中一份为 remUnit 值。
  20. // 如设计稿最大宽度为 750px,此只 remUnit 的配置值为: 750 / 10 = 75
  21. remUnit: 75,
  22. // less\css\sass\postcss
  23. // 当前仍只支持前两种
  24. compileCss: ‘less‘,
  25. // SVN地址
  26. svn: ‘‘
  27. },
  28. //...
  29. ]
  30. }

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

4. 相关任务流程

任务参数包括:
pro 指定任务所对应的项目名称,对应于项目配置中的 pro.name;
sn 指定任务所对应的项目编号,对应于项目配置中的 pro.sn;

4.1 初始化任务

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

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

  1. src
  2. |-gqkuandai
  3. |-config
  4. |-data.js
  5. |-controller
  6. |-app.js
  7. |-base.js
  8. view
  9. |-gqkuandai
  10. |-public
  11. |-block
  12. |-head_all.html
  13. |-head_wap.html
  14. |-head_web.html
  15. |-frame
  16. |-app_index.html
  17. www
  18. |-static
  19. |-gqkuandai
  20. |-src
  21. |-css
  22. |-less
  23. |-...
  24. |-src
  25. |-...
  26. |-images
  27. |-...
  28. |-js
  29. |-comm.js
  30. |-lib
  31. |-...

4.2 项目监控任务

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

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

4.3 项目编译任务

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

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

4.4 项目发布任务

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

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

4.5 项目归档任务

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

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

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

4.6 项目重加载任务

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

这是归档任务的反操作,当我们将某一项目归档处理后,可能后期的某个时间点,我们仍需要处理这个项目,但当前的项目文件已被归档,开发IDE对于它已不工作,因此,这里通过这个任务,重新将已归档的任务重新加载到环境中。

4.7 项目删除任务

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

用于删除某一个项目源码。
本操作需要非常小心,除非十分明确,本项目的源码已不再需要,否则请不要执行本任务。本操作的执行结果,会彻底清空该项目的源码,清除后,无法恢复。
当不太确定是否还需要该项目的源码存在于IDE中时,但又不想该项目的相关代码对自己当前工作产生干扰,此种情况下,最好选择归档操作。

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

  1. gulp release

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

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

4.9 项目列表任务

  1. gulp list

当整体的项目工程中,任务配置数量经积累较多后,整个工程中的项目会很多,在某个时候我们有可能需要查看工程中所有的项目信息,这时,可以通过该任务查看工程中的项目列表信息。

如:

  1. gulp list
  2. [00:43:54] Requiring external module babel-register
  3. [00:43:54] Working directory changed to C:\project\aiui_dev
  4. ==================================================================
  5. -- 项目列表
  6. [00:43:56] Using gulpfile C:\project\aiui_dev\gulpfile.babel.js
  7. [00:43:57] Starting ‘list‘...
  8. ------------------------------------------------------------------
  9. -- 框架初始化样例项目 项目信息
  10. ------------------------------------------------------------------
  11. Project title:: 框架初始化样例项目
  12. Project SN:: 2016-PI001
  13. Project Name:: init
  14. Surport Device Type:: pc
  15. ------------------------------------------------------------------
  16. ------------------------------------------------------------------
  17. -- 陕西网厅客户关怀平台 项目信息
  18. ------------------------------------------------------------------
  19. Project title:: 陕西网厅客户关怀平台
  20. Project SN:: 2016-SN03
  21. Project Name:: sxwt
  22. Surport Device Type:: pc
  23. ------------------------------------------------------------------
  24. [00:43:57] Finished ‘list‘ after 11 ms

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

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

  1. gulp listpages

用于列出某一项目中,包含的所有页面配置信息。

  1. gulp listpages --pro sxwt
  2. [00:56:42] Requiring external module babel-register
  3. [00:56:42] Working directory changed to C:\project\aiui_dev
  4. ==================================================================
  5. -- sxwt 项目包含页面列表
  6. ------------------------------------------------------------------
  7. -- Gulp task params
  8. ------------------------------------------------------------------
  9. Project title:: 陕西网厅客户关怀平台
  10. Project SN:: 2016-SN03
  11. Project Name:: sxwt
  12. Device Type:: pc
  13. ------------------------------------------------------------------
  14. [00:56:45] Using gulpfile C:\project\aiui_dev\gulpfile.babel.js
  15. [00:56:45] Starting ‘listpages‘...
  16. ------------------------------------------------------------------
  17. -- 陕西网厅客户关怀平台 项目页面信息
  18. ------------------------------------------------------------------
  19. --
  20. -- Page title:: 陕西网厅首页
  21. -- Page file name:: index.html
  22. --
  23. ------------------------------------------------------------------
  24. ------------------------------------------------------------------
  25. --
  26. -- Page title:: 陕西网厅E币福利
  27. -- Page file name:: fuli.html
  28. --
  29. ------------------------------------------------------------------
  30. [00:56:45] Finished ‘listpages‘ after 176 ms

从以上实例可以看到,当前项目中包含两个页面:index.html fuli.html

4.11 项目信息搜索任务

  1. gulp search --key xxxx

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

如:

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

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

5. 项目开发流程

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

流程为:

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

5. 开发完成,打包及发布;

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

5.1 项目信息确定及配置

项目信息为:

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

项目配置文件路径:

  1. src/common/config/aipro_liyz.js

配置信息

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

5.2 项目初始化

在项目根目录下执行

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

5.3 分析面组成

首页: index
福利页: fuli

配置文件路径:

  1. src/sxwt/config/data.js

配置文件内容:

  1. export default {
  2. ‘pages‘: {
  3. index: {
  4. action: ‘index‘,
  5. title: ‘陕西网厅首页‘,
  6. data: {
  7. ‘curr‘: ‘index‘,
  8. ‘userInfo‘: {
  9. name: ‘星空‘,
  10. avatar: ‘/images/avatar_1.png‘,
  11. level: 6,
  12. levelName: ‘高手‘,
  13. levelImg: ‘/images/level_06.png‘,
  14. eNum: 388,
  15. curIntegral: 3001,
  16. nextLevelIntegral: 4000
  17. },
  18. ‘duihuanList‘: [
  19. {
  20. img: ‘/images/i_p_001.png‘,
  21. title: ‘10元话费‘,
  22. btText: ‘10E币兑换‘,
  23. validDate: ‘2016-09-19至2016-09-30‘,
  24. zhekou: ‘9.5折‘,
  25. count: ‘4582‘
  26. },
  27. //...
  28. ]
  29. }
  30. },
  31. fuli: {
  32. action: ‘fuli‘,
  33. title: ‘陕西网厅E币福利‘,
  34. data: {
  35. ‘curr‘: ‘fuli‘
  36. }
  37. }
  38. }
  39. }
  40. // action 和 title 属性为必须,并且 action 与当前页面名称保持一致。
  41. // 其中的 data 属性为用户随意依需求定义,只需要语法正确即可。

5.4 项目开发及调试

相关的任务

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

固有变量说明:

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

页面文件新建路径为:

  1. view/sxwt/xxx.html

页面的命名规范为:

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

项目所有的静态资源存放位置:

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

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

5.5 项目打包发布

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

  1. gulp dist --pro sxwt

发布的文件路径为:

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

5.6 工具自动升级

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

  1. gulp update
  1. 运行结果类似如下内容
  1. C:\project\aiflow (master) (aiui-automation-[email protected].0.8)
  2. λ gulp update
  3. [14:30:02] Requiring external module babel-register
  4. ==================================================================
  5. -- 软件升级
  6. [14:30:06] Using gulpfile C:\project\aiflow\gulpfile.babel.js
  7. [14:30:06] Starting ‘update‘...
  8. -- 当前版本号:: 0.0.8
  9. -- 当前版本发布日期:: 20170215161606
  10. --
  11. -- 当前版本已是最新,无需升级!
  12. ------------------------------------------------------------------
  13. [14:30:06] Finished ‘update‘ after 11 ms

以上是关于无标题的主要内容,如果未能解决你的问题,请参考以下文章

QT 实用代码片段

2021-09-11:给你一个32位的有符号整数x,返回将x中的数字部分反转后的结果。反转后整数超过 32 位的有符号整数的范围就返回0,假设环境不允许存储 64 位整数(有符号或无符号)。(代码片段

LEETCODE 003 找出一个字符串中最长的无重复片段

未指定 CLion 目标 - 无目标

Discord.js 不发送消息(无错误)

AppCompat v22.1.0 没有为片段正确主题化所有 xml 小部件