weflowv1.3.3綠色版

weflow是一個 GUI 的前端工具，可以為用戶提供一套標準化、規(guī)范化的工作流程，從而讓大家在交接協(xié)作的時候更為高效有序。軟件的應(yīng)用場景是覆蓋到外界普通公司的前端開發(fā)團隊的，由于在 GitHub 開源發(fā)布，各個團隊可以根據(jù)自身公司業(yè)務(wù)特點自主的進行功能定制，對流程進行定制化的拼接，從而使用超低門檻的 GUI 界面執(zhí)行前端開發(fā)任務(wù)，便可得到一個項目輸出壓縮包。

使用教程

1.開發(fā)任務(wù) gulp build_dev
添加文件點擊開發(fā)，進入開發(fā)模式

自動創(chuàng)建與 src 目錄一致的 dev 目錄存放 ejs 和 less 編譯后的文件
自動監(jiān)聽所有文件變動
監(jiān)聽到文件變動時自動刷新瀏覽器, 可在工作流配置文件 .tmtworkflowrc 選擇開啟或關(guān)閉

2. 生產(chǎn)任務(wù) gulp build_dist
當開發(fā)完成之后，點擊生產(chǎn)編譯，執(zhí)行 gulp build_dist 生成可供發(fā)布上線的最終文件。 自動生成 dist 目錄，存放所有經(jīng)過編譯合并的文件

3. FTP 部署 gulp ftp
此任務(wù)依賴于 生產(chǎn)任務(wù)，執(zhí)行 gulp ftp時，會先執(zhí)行 gulp build_dist 生成 dist 目錄，然后將生成的 dist 目錄上傳至 .tmtworkflowrc 指定的 ftp 地址。
4. 打包 gulp zip
執(zhí)行 zip 任務(wù)時，會先執(zhí)行 gulp build_dist 生成 dist 目錄，再將其打包壓縮成 zip 包。

配置文件

在與項目同級的目錄下，有一個全局的 .tmtworkflowrc 配置文件，項目下也可以有一個 .tmtworkflowrc，程序運行時先尋找當前目錄下是否有配置文件，如果沒有，則繼續(xù)往上一層目錄尋找，直到系統(tǒng)目錄
我們使用 rc 組件來管理配置文件。如果項目下不存在 .tmtworkflowrc 文件，將會根據(jù)以下優(yōu)化級進行尋找配置。
系統(tǒng)環(huán)境變量以 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
工作流默認配置
通過修改配置文件，可以實現(xiàn)自定義任務(wù)中的相關(guān)流程，例如：是否需要編譯一份 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 任務(wù)執(zhí)行后自動執(zhí)行
    "build_distAfter": [],          //build 任務(wù)執(zhí)行后自動執(zhí)行
    "ftpAfter": ["ftp"]        //ftp 任務(wù)執(zhí)行后自動執(zhí)行
  },
  "lazyDir": ["../slice"], //gulp-lazyImageCSS 尋找目錄(https://github.com/weixin/gulp-lazyimagecss)
  "supportWebp": false,  //編譯使用 webp
  "supportREM": false,   //REM轉(zhuǎn)換
  "reversion": false     //新文件名功能
}

功能特性

使用Less 作為主要開發(fā)語言，目前 Sass 也已經(jīng)支持。
workflow 集成了 自動補全 功能，代碼里只需按標準來寫即可。 注意 只有在gulp build_dist才有自動補全，開發(fā)版本按照最新最炫的來
自動生成圖片 CSS 屬性
CSS cssnano 壓縮
CSS Sprite 雪碧圖合成
Retina @2x & @3x 自動生成適配
Imagemin 圖片壓縮
JS 合并壓縮
EJS 模版語言
監(jiān)聽文件變動，自動刷新瀏覽器
支持直接生成 zip 包，只需執(zhí)行 gulp zip 即可，會先調(diào)用 gulp build_dist 生成 dist 目錄，再將 dist 目錄打包壓縮，最后刪除