亞信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教程