在日常的前端開(kāi)發(fā)中，我們會(huì)遇到LESS/SASS編譯、CSS前綴自動(dòng)補(bǔ)全、CSS壓縮、圖片壓縮、JS合并壓縮、布署發(fā)布等各種各樣的操作。通常，我們都會(huì)根據(jù)實(shí)際情況定制一個(gè)流程性的工具來(lái)實(shí)現(xiàn)所有常規(guī)的功能，這，就是我理解的前端工作流。

CssGaga

曾經(jīng)，使用過(guò)一段時(shí)間的CssGaga，為它的強(qiáng)大功能而感到震憾，幾乎解決了所有常見(jiàn)的需求。

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

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

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

我理想中的工作流

一個(gè)人，想某件事，想得多了，就會(huì)有所行動(dòng)，比如我曾經(jīng)喜歡的妹子，現(xiàn)在成了我的老婆。。。。。

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

結(jié)合公司的工作模式和實(shí)際業(yè)務(wù)實(shí)踐，我把一個(gè)這個(gè)流程分成兩個(gè)過(guò)程：開(kāi)發(fā)過(guò)程和布署過(guò)程。

1.開(kāi)發(fā)過(guò)程

當(dāng)我開(kāi)始開(kāi)發(fā)時(shí)，我希望是所見(jiàn)即所得的，我的每一次代碼編輯，都能即時(shí)的響應(yīng)反饋在我面前;我用的是能提升我效率的CSS預(yù)處理語(yǔ)言，我希望她能即時(shí)的幫我編譯成CSS;我用rem,但我寫(xiě)的是px，我希望她能幫我轉(zhuǎn)換……

我想要的開(kāi)發(fā)過(guò)程很簡(jiǎn)單，就是能幫我提升效率！

2.布署過(guò)程

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

Less/Sass->CSS

CSSAutoprefixer前綴自動(dòng)補(bǔ)全

CSS壓縮合并

CSSSprite雪碧圖合成

Retina@2x&@3x自動(dòng)生成適配

imagemin圖片壓縮

JS合并壓縮

EJS模版語(yǔ)言

…

我希望這個(gè)過(guò)程是一個(gè)命令或一鍵就可以完成的，而不是多次拖拉生成。

我要的流程其實(shí)很簡(jiǎn)單，就是越簡(jiǎn)單越好！

下面，介紹一下因此而誕生的解決方案——tmt-workflow。

tmt-workflow

tmt-workflow是一個(gè)基于Gulp(v4.0)、跨平臺(tái)(Mac&Win)、高效、可定制的前端工作流程。

功能特性

她除了實(shí)現(xiàn)了以上設(shè)想的各種功能外，還有：

基于Gulp4，超好用的流程化(gulp.series,gulp.parallel)控制API，更高的性能

跨平臺(tái)的，支持Win和Mac，滿足各類開(kāi)發(fā)者

所有項(xiàng)目共享一個(gè)node_modules，只需一次npminstall即可

可定制的，你可以根據(jù)自己的需求修改實(shí)現(xiàn)你自己想要的功能

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

快速開(kāi)始

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

使用Yoeman腳手架generator-workflow自動(dòng)安裝（推薦）：

npminstall-ggenerator-workflow

yoworkflow

直接下載安裝：

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

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

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

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

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

工作流目錄結(jié)構(gòu)

tmt-workflow/

│

├──_tasks//Gulp任務(wù)目錄

│├──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//項(xiàng)目目錄，詳見(jiàn)下述項(xiàng)目結(jié)構(gòu)↓↓↓

├──src

├──dev

├──dist

└──gulpfile.js

項(xiàng)目目錄結(jié)構(gòu)

project///項(xiàng)目目錄

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

│

├──src//源文件目錄，`gulpbuild_dev`階段會(huì)此目錄下的文件變動(dòng)

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

││├──lib-reset.less

││├──lib-mixins.less

││├──lib-rem.less

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

││

│├──

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

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

│├──icon-dribbble.png

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

│

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

│├──css

│├──

│├──img

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

│

└──dist//生產(chǎn)目錄，由`gulpbuild_dist`任務(wù)生成

├──css

├──

├──img

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

├──style-index.png

└──style-index@2x.png

配置文件.tmtworkflowrc

.tmtworkflowrc配置文件，位于工作流根目錄，可存放配置信息或開(kāi)啟相關(guān)功能，

如：FTP配置信息、開(kāi)啟WebP功能，開(kāi)啟REM支持等。

{

//FTP發(fā)布配置

"ftp":{

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

"port":"8021",

"user":"tmt",

"pass":"password",

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

"includeHtml":true//FTP上傳時(shí)是否包含文件

},

//瀏覽器自動(dòng)刷新

"livereload":{

"available":true,//開(kāi)啟

"port":8080,

"startPath":/TmTIndex"http://啟動(dòng)時(shí)自動(dòng)打開(kāi)的路徑

},

//插件功能

//路徑相對(duì)于tasks/plugins目錄

"plugins":{

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

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

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

},

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

"supportWebp":false,//開(kāi)啟WebP解決方案

"supportREM":false,//開(kāi)啟REM適配方案，自動(dòng)轉(zhuǎn)換px->rem

"reversion":false//開(kāi)啟新文件名md5功能

}

任務(wù)簡(jiǎn)要說(shuō)明

1.開(kāi)發(fā)任務(wù)gulpbuild_dev

按照目錄結(jié)構(gòu)創(chuàng)建好項(xiàng)目后，執(zhí)行g(shù)ulpbuild_dev生成開(kāi)發(fā)文件位于/dev，包含以下過(guò)程

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

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

注：瀏覽器刷新功能可在.tmtworkflowrc中進(jìn)行配置，默認(rèn)開(kāi)啟。

2.生產(chǎn)任務(wù)gulpbuild_dist

開(kāi)發(fā)完成后，執(zhí)行g(shù)ulpbuild_dist生成最終文件到/dist目錄，包含以下過(guò)程：

LESS/EJS編譯

CSS/JS/IMG壓縮合并

slice圖片合并成雪碧圖

文件添加版本號(hào)

WebP圖片支持

3.FTP部署gulpftp

依賴于生產(chǎn)任務(wù)，執(zhí)行后，會(huì)先執(zhí)行g(shù)ulpbuild_dist，然后將其生成的/dist目錄上傳至.tmtworkflowrc指定的FTP服務(wù)器。

4.打包任務(wù)gulpzip

依賴于生產(chǎn)任務(wù)，執(zhí)行后，會(huì)先執(zhí)行g(shù)ulpbuild_dist，然后將其生成的/dist目錄壓縮成zip格式。

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

注2：FTP和zip任務(wù)執(zhí)行后會(huì)自動(dòng)刪除/dist目錄。

使用預(yù)覽

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

tmt-workflow具有良好的定制性和擴(kuò)展性，用戶可針對(duì)自身團(tuán)隊(duì)的具體需求定制，更多可查看：

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

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

最后，或許你會(huì)問(wèn)：為什么叫tmt-workflow？

TmT:我們的組名，TencentMoeTeam。

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