在日常的前端開發中，我們會遇到 LESS/SASS 編譯、CSS 字首自動補全 、CSS 壓縮、 圖片壓縮、JS 合併壓縮、佈署釋出 等各種各樣的操作。通常，我們都會根據實際情況定製一個 流程 性的工具來實現所有常規的功能，這，就是我理解的 前端工作流。
CssGaga
曾經，使用過一段時間的 CssGaga，為它的強大功能而感到震憾，幾乎解決了所有常見的需求。
那一段時間裡，習慣了 CssGaga 拖圖片即壓縮上傳，拖 CSS 檔案即壓縮+合併雪碧圖上傳，拖啥就做啥。也就是說，你想要做什麼操作，就手動拖拉什麼檔案就好了。
但隨著自己慢慢變胖，慢慢的越來越懶，有時候就想，為什麼每次完成開發後，要手動拖幾次檔案，而不是一鍵就搞定所有必要的功能呢？
CssGaga 的模式非常值得借鑑學習，特別是它的
雪碧圖合成方式，見過很多優秀的雪碧圖外掛都是參照其寫法，如：grunt-sprite 、gulp-tmtsprite
我理想中的工作流
一個人，想某件事，想得多了，就會有所行動，比如我曾經喜歡的妹子，現在成了我的老婆。。。。。
不好意思，扯遠了，繼續講我想要的工作流模式。
結合公司的工作模式和實際業務實踐，我把一個這個流程分成兩個過程：開發過程 和 佈署過程。
1. 開發過程
當我開始開發時，我希望是所見即所得的，我的每一次程式碼編輯，都能即時的響應反饋在我面前; 我用的是能提升我效率的 CSS 預處理語言，我希望她能即時的幫我編譯成 CSS; 我用 rem, 但我寫的是 px，我希望她能幫我轉換……
我想要的 開發過程 很簡單，就是能幫我提升效率！
2. 佈署過程
開發完後，終於到了要釋出的時候了。釋出前，需要生成可以放到 生產環境 中的程式碼，而這個過程，要做的工作有非常多，大概有如下：
- Less/Sass -> CSS
- CSS Autoprefixer 字首自動補全
- CSS 壓縮合並
- CSS Sprite 雪碧圖合成
- Retina @2x & @3x 自動生成適配
- imagemin 圖片壓縮
- JS 合併壓縮
- EJS 模版語言
- …
我希望這個過程是一個命令或一鍵就可以完成的，而不是多次拖拉生成。
我要的流程其實很簡單，就是越簡單越好！
下面，介紹一下因此而誕生的解決方案——tmt-workflow。
tmt-workflow
tmt-workflow 是一個基於 Gulp(v4.0)、跨平臺(Mac & Win)、高效、可定製的前端工作流程。
功能特性
她除了實現了以上設想的各種功能外，還有：
- 基於 Gulp4 ，超好用的流程化(gulp.series, gulp.parallel)控制 API，更高的效能
- 跨平臺的，支援 Win 和 Mac，滿足各類開發者
- 所有專案共享一個
node_modules，只需一次npm install即可 - 可定製的，你可以根據自己的需求修改實現你自己想要的功能
- 自帶
rem適配方案、智慧 Webp 解決方案、去快取檔案 Reversion (MD5) 解決方案
快速開始
以下 2 種方式任選，請確保已安裝 Node.js 環境
- 使用 Yoeman 腳手架 generator-workflow 自動安裝（推薦）：
npm install -g generator-workflowyo workflow
- 直接下載安裝：
- 全域性安裝 Gulp 4，執行：
npm install gulpjs/gulp#4.0 -g - 點選下載 tmt-workflow，進入根目錄執行：
npm install
- 全域性安裝 Gulp 4，執行：
注1：Gulp 4 目前 尚未正式釋出，Windows 使用者請先安裝 git，
然後在 Git Bash 下執行npm install即可（非CMD）。注2：如遇
npm install網路問題，推薦嘗試 cnpm 安裝環境依賴
工作流目錄結構
|
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 |
tmt-workflow/ │ ├── _tasks // Gulp 任務目錄 │ ├── TaskBuildDev.js // gulp build_dev │ ├── TaskBuildDist.js // gulp build_dist │ ├── TaskFTP.js // gulp ftp │ ├── TaskZip.js // gulp zip │ │ │ ├── common │ │ └── webp.js │ │ │ ├── index.js │ │ │ ├── lib │ │ └── util.js │ │ │ └── plugins // 外掛目錄 │ ├── TmTIndex.js │ └── ftp.js │ ├── package.json │ └── project // 專案目錄，詳見下述專案結構 ↓↓↓ ├── src ├── dev ├── dist └── gulpfile.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 |
project/ // 專案目錄 ├── gulpfile.js // Gulp 工作流配置檔案 │ ├── src // 原始檔目錄，`gulp build_dev`階段會監聽此目錄下的檔案變動 │ ├── css // 存放 Less 檔案的目錄，只有 style-*.less 的檔名會被編譯 │ │ ├── lib-reset.less │ │ ├── lib-mixins.less │ │ ├── lib-rem.less │ │ └── style-index.less // CSS 編譯出口檔案 │ │ │ ├── html │ ├── img // 存放背景圖等無需合併雪碧圖處理的圖片 │ └── slice // 切片圖片素材，將會進行雪碧圖合併，同名 @2x 圖片也會合並 │ ├── icon-dribbble.png │ └── icon-dribbble@2x.png │ ├── dev // 開發目錄，由 `gulp build_dev` 任務生成 │ ├── css │ ├── html │ ├── img │ └── slice // 開發階段，僅從 src/slice 拷貝至此，不做合併雪碧圖處理 │ └── dist // 生產目錄，由 `gulp build_dist` 任務生成 ├── css ├── html ├── img └── sprite // 將 /src/slice 合併雪碧圖，根據 /css 檔名，命名為 style-*.png ├── style-index.png └── style-index@2x.png |
配置檔案 .tmtworkflowrc
.tmtworkflowrc 配置檔案，位於工作流根目錄，可存放配置資訊或開啟相關功能，
如：FTP 配置資訊、開啟 WebP功能，開啟 REM 支援等。
|
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 |
{ // 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"], // build_dev 任務執行完成後，自動執行 "build_distAfter": [], // build_dist 任務執行完成後，自動執行 "ftpAfter": ["ftp"] // ftp 任務執行完成後，自動執行 }, "lazyDir": ["../slice"], // gulp-lazyImageCSS 啟用目錄 "supportWebp": false, // 開啟 WebP 解決方案 "supportREM": false, // 開啟 REM 適配方案，自動轉換 px -> rem "reversion": false // 開啟 新檔名 md5 功能 } |
任務簡要說明
1. 開發任務 gulp build_dev
按照目錄結構建立好專案後，執行 gulp build_dev 生成開發檔案位於 /dev，包含以下過程
- 完成
ejs -> html和less -> css編譯 - 自動監聽檔案改動，觸發瀏覽器重新整理
注：瀏覽器重新整理功能可在 .tmtworkflowrc 中進行配置，預設開啟。
2. 生產任務 gulp build_dist
開發完成後，執行 gulp build_dist 生成最終檔案到 /dist 目錄，包含以下過程：
- LESS/EJS 編譯
- CSS/JS/IMG 壓縮合並
- slice 圖片合併成雪碧圖
- 檔案新增版本號
- WebP 圖片支援
3. FTP 部署 gulp ftp
依賴於 生產任務，執行後，會先執行 gulp build_dist ，然後將其生成的 /dist 目錄上傳至 .tmtworkflowrc 指定的 FTP 伺服器。
4. 打包任務 gulp zip
依賴於 生產任務，執行後，會先執行 gulp build_dist ，然後將其生成的 /dist 目錄壓縮成 zip 格式。
注1：
./src為原始檔目錄，/dev和/dist目錄為流程自動生成的目錄。
注2：FTP和zip任務執行後會自動刪除/dist目錄。
使用預覽
推薦配合 WebStorm 等編輯器的 Gulp 工作管理員 使用更佳。
tmt-workflow 具有良好的定製性和擴充套件性，使用者可針對自身團隊的具體需求定製，更多可檢視：
Github: https://github.com/weixin/tmt-workflow
Wiki: https://github.com/weixin/tmt-workflow/wiki
最後，或許你會問：為什麼叫 tmt-workflow？
TmT : 我們的組名，Tencent Moe Team。
工作流的名字隨意，你也可以根據你們自己的習慣自由發揮，比如 Aoi sola、Yui Hatano、Takizawa Rola 。