weflow是什么？weflow如何使用？WeFlow一個高效、強大、跨平臺的前端開發工作流工具，具體的說就是一個 GUI 的前端工具，可以為用戶提供一套標準化、規范化的工作流程，從而讓大家在交接協作的時候更為高效有序。接下來小編就給大家簡單介紹一下weflow怎么用，以及如何配置文件，需要的用戶歡迎借鑒！

weflow怎么用？

1.開發任務 gulp build_dev

添加文件點擊開發，進入開發模式

自動創建與 src 目錄一致的 dev 目錄存放 ejs 和 less 編譯后的文件

自動監聽所有文件變動

監聽到文件變動時自動刷新瀏覽器, 可在工作流配置文件 .tmtworkflowrc 選擇開啟或關閉

2. 生產任務 gulp build_dist

當開發完成之后，點擊生產編譯，執行 gulp build_dist 生成可供發布上線的最終文件。 自動生成 dist 目錄，存放所有經過編譯合并的文件

3. FTP 部署 gulp ftp

此任務依賴于 生產任務，執行 gulp ftp時，會先執行 gulp build_dist 生成 dist 目錄，然后將生成的 dist 目錄上傳至 .tmtworkflowrc 指定的 ftp 地址。

4. 打包 gulp zip

執行 zip 任務時，會先執行 gulp build_dist 生成 dist 目錄，再將其打包壓縮成 zip 包。

配置文件

在與項目同級的目錄下，有一個全局的 .tmtworkflowrc 配置文件，項目下也可以有一個 .tmtworkflowrc，程序運行時先尋找當前目錄下是否有配置文件，如果沒有，則繼續往上一層目錄尋找，直到系統目錄

我們使用 rc 組件來管理配置文件。如果項目下不存在 .tmtworkflowrc 文件，將會根據以下優化級進行尋找配置。

系統環境變量以 tmtworkflow_ 開頭的變量，(例如： tmtworkflow_foo__bar__baz => foo.bar.baz)

項目目錄下的 .tmtworkflowrc 或依次向上遍歷查找 ./ ../ ../../ ../../../

$HOME/.tmtworkflowrc

$HOME/.tmtworkflowrc/config

$HOME/.config/tmtworkflowrc

$HOME/.config/tmtworkflowrc/config

/etc/tmtworkflowrc

/etc/tmtworkflowrc/config

工作流默認配置

通過修改配置文件，可以實現自定義任務中的相關流程，例如：是否需要編譯一份 WEBP 資源，是否編譯 HTML 文件到 dist 目錄。

.tmtworkflowrc 配置示例

{

  //ftp 配置

  "ftp": {

    "host": "xx.xx.xx.xx",

    "port": "8021",

    "user": "tmt",

    "pass": "password",

    "remotePath": "remotePath", //默認上傳到根目錄下，配置此屬性可指定具體子目錄

    "includeHtml": true  //ftp 上傳是否包含 html

  },

  //自動刷新

  "livereload": {

     "available": true,  //開啟自動刷新

     "port": 8080,

     "startPath": "html/TmTIndex.html"  //啟動時自動打開的路徑

   },

   //插件功能

   //路徑相對于 tasks/plugins 目錄

  "plugins": {

    "build_devAfter": ["TmTIndex"],  //dev 任務執行后自動執行

    "build_distAfter": [],          //build 任務執行后自動執行

    "ftpAfter": ["ftp"]        //ftp 任務執行后自動執行

  },

  "lazyDir": ["../slice"], //gulp-lazyImageCSS 尋找目錄(https://github.com/weixin/gulp-lazyimagecss)

  "supportWebp": false,  //編譯使用 webp

  "supportREM": false,   //REM轉換

  "reversion": false     //新文件名功能

}

教程結束，以上就是關于weflow如何使用？weflow的使用及配置文件教程的全部內容，希望大家喜歡！更多精彩，盡在VEVB武林網網站！