在日常的前端開發(fā)中，我們會遇到LESS/SASS編譯、CSS前綴自動補全、CSS壓縮、圖片壓縮、JS合并壓縮、布署發(fā)布等各種各樣的操作。通常，我們都會根據實際情況定制一個流程性的工具來實現所有常規(guī)的功能，這，就是我理解的前端工作流。

CssGaga

曾經，使用過一段時間的CssGaga，為它的強大功能而感到震憾，幾乎解決了所有常見的需求。

那一段時間里，習慣了CssGaga拖圖片即壓縮上傳，拖CSS文件即壓縮+合并雪碧圖上傳，拖啥就做啥。也就是說，你想要做什么操作，就手動拖拉什么文件就好了。

但隨著自己慢慢變胖，慢慢的越來越懶，有時候就想，為什么每次完成開發(fā)后，要手動拖幾次文件，而不是一鍵就搞定所有必要的功能呢？

CssGaga的模式非常值得借鑒學習，特別是它的雪碧圖合成方式，見過很多優(yōu)秀的雪碧圖插件都是參照其寫法，如：grunt-sprite、gulp-tmtsprite

我理想中的工作流

一個人，想某件事，想得多了，就會有所行動，比如我曾經喜歡的妹子，現在成了我的老婆。。。。。

不好意思，扯遠了，繼續(xù)講我想要的工作流模式。

結合公司的工作模式和實際業(yè)務實踐，我把一個這個流程分成兩個過程：開發(fā)過程和布署過程。

1.開發(fā)過程

當我開始開發(fā)時，我希望是所見即所得的，我的每一次代碼編輯，都能即時的響應反饋在我面前;我用的是能提升我效率的CSS預處理語言，我希望她能即時的幫我編譯成CSS;我用rem,但我寫的是px，我希望她能幫我轉換……

我想要的開發(fā)過程很簡單，就是能幫我提升效率！

2.布署過程

開發(fā)完后，終于到了要發(fā)布的時候了。發(fā)布前，需要生成可以放到生產環(huán)境中的代碼，而這個過程，要做的工作有非常多，大概有如下：

Less/Sass->CSS

CSSAutoprefixer前綴自動補全

CSS壓縮合并

CSSSprite雪碧圖合成

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，滿足各類開發(fā)者

所有項目共享一個node_modules，只需一次npminstall即可

可定制的，你可以根據自己的需求修改實現你自己想要的功能

自帶rem適配方案、智能Webp解決方案、去緩存文件Reversion(MD5)解決方案

快速開始

以下2種方式任選，請確保已安裝Node.js環(huán)境

使用Yoeman腳手架generator-workflow自動安裝（推薦）：

npminstall-ggenerator-workflow

yoworkflow

直接下載安裝：

全局安裝Gulp4，執(zhí)行：npminstallgulpjs/gulp#4.0-g

點擊下載tmt-workflow，進入根目錄執(zhí)行：npminstall

注1：Gulp4目前尚未正式發(fā)布，Windows用戶請先安裝git，

然后在GitBash下執(zhí)行npminstall即可（非CMD）。

注2：如遇npminstall網絡問題，推薦嘗試pm安裝環(huán)境依賴

工作流目錄結構

tmt-workflow/

│

├──_tasks//Gulp任務目錄

│├──TaskBuildDev.js//gulpbuild_dev

│├──TaskBuildDist.js//gulpbuild_dist

│├──TaskFTP.js//gulpftp

│├──TaskZip.js//gulpzip

││

│├──mon

││└──webp.js

││

│├──index.js

││

│├──lib

││└──util.js

││

│└──plugins//插件目錄

│├──TmTIndex.js

│└──ftp.js

│

├──package.json

│

└──project//項目目錄，詳見下述項目結構↓↓↓

├──src

├──dev

├──dist

└──gulpfile.js

項目目錄結構

project///項目目錄

├──gulpfile.js//Gulp工作流配置文件

│

├──src//源文件目錄，`gulpbuild_dev`階段會此目錄下的文件變動

│├──css//存放Less文件的目錄，只有style-*.less的文件名會被編譯

││├──lib-reset.less

││├──lib-mixins.less

││├──lib-rem.less

││└──style-index.less//CSS編譯出口文件

││

│├──

│├──img//存放背景圖等無需合并雪碧圖處理的圖片

│└──slice//切片圖片素材，將會進行雪碧圖合并，同名@2x圖片也會合并

│├──icon-dribbble.png

│└──icon-dribbble@2x.png

│

├──dev//開發(fā)目錄，由`gulpbuild_dev`任務生成

│├──css

│├──

│├──img

│└──slice//開發(fā)階段，僅從src/slice拷貝至此，不做合并雪碧圖處理

│

└──dist//生產目錄，由`gulpbuild_dist`任務生成

├──css

├──

├──img

└──sprite//將/src/slice合并雪碧圖，根據/css文件名，命名為style-*.png

├──style-index.png

└──style-index@2x.png

配置文件.tmtworkflowrc

.tmtworkflowrc配置文件，位于工作流根目錄，可存放配置信息或開啟相關功能，

如：FTP配置信息、開啟WebP功能，開啟REM支持等。

{

//FTP發(fā)布配置

"ftp":{

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

"port":"8021",

"user":"tmt",

"pass":"password",

"remotePath":"remotePath",//默認上傳至根目錄，此屬性可指定子目錄路徑

"includeHtml":true//FTP上傳時是否包含文件

},

//瀏覽器自動刷新

"livereload":{

"available":true,//開啟

"port":8080,

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

},

//插件功能

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

"plugins":{

"build_devAfter":["TmTIndex"],//build_dev任務執(zhí)行完成后，自動執(zhí)行

"build_distAfter":[],//build_dist任務執(zhí)行完成后，自動執(zhí)行

"ftpAfter":["ftp"]//ftp任務執(zhí)行完成后，自動執(zhí)行

},

"lazyDir":["../slice"],//gulp-lazyImageCSS啟用目錄

"supportWebp":false,//開啟WebP解決方案

"supportREM":false,//開啟REM適配方案，自動轉換px->rem

"reversion":false//開啟新文件名md5功能

}

任務簡要說明

1.開發(fā)任務gulpbuild_dev

按照目錄結構創(chuàng)建好項目后，執(zhí)行gulpbuild_dev生成開發(fā)文件位于/dev，包含以下過程

完成ejs->和less->css編譯

自動文件改動，觸發(fā)瀏覽器刷新

注：瀏覽器刷新功能可在.tmtworkflowrc中進行配置，默認開啟。

2.生產任務gulpbuild_dist

開發(fā)完成后，執(zhí)行gulpbuild_dist生成最終文件到/dist目錄，包含以下過程：

LESS/EJS編譯

CSS/JS/IMG壓縮合并

slice圖片合并成雪碧圖

文件添加版本號

WebP圖片支持

3.FTP部署gulpftp

依賴于生產任務，執(zhí)行后，會先執(zhí)行gulpbuild_dist，然后將其生成的/dist目錄上傳至.tmtworkflowrc指定的FTP服務器。

4.打包任務gulpzip

依賴于生產任務，執(zhí)行后，會先執(zhí)行gulpbuild_dist，然后將其生成的/dist目錄壓縮成zip格式。

注1：./src為源文件目錄，/dev和/dist目錄為流程自動生成的目錄。

注2：FTP和zip任務執(zhí)行后會自動刪除/dist目錄。

使用預覽

推薦配合WebStorm等編輯器的Gulp任務管理器使用更佳。

tmt-workflow具有良好的定制性和擴展性，用戶可針對自身團隊的具體需求定制，更多可查看：

Github:https://github/weixin/tmt-workflow

Wiki:https://github/weixin/tmt-workflow/wiki

最后，或許你會問：為什么叫tmt-workflow？

TmT:我們的組名，TencentMoeTeam。

工作流的名字隨意，你也可以根據你們自己的習慣自由發(fā)揮，比如Aoisola、YuiHatano、TakizawaRola。