在日常的前端开发中，我们会遇到LESS/SASS编译、CSS前缀自动补全、CSS压缩、图片压缩、JS合并压缩、布署发布等各种各样的操作。通常，我们都会根据实际情况定制一个流程性的工具来实现所有常规的功能，这，就是我理解的前端工作流。
CssGaga
曾经，使用过一段时间的CssGaga，为它的强大功能而感到震憾，几乎解决了所有常见的需求。
那一段时间里，习惯了CssGaga拖图片即压缩上传，拖CSS文件即压缩+合并雪碧图上传，拖啥就做啥。也就是说，你想要做什么操作，就手动拖拉什么文件就好了。
但随着自己慢慢变胖，慢慢的越来越懒，有时候就想，为什么每次完成开发后，要手动拖几次文件，而不是一键就搞定所有必要的功能呢？
CssGaga的模式非常值得借鉴学习，特别是它的雪碧图合成方式，见过很多优秀的雪碧图插件都是参照其写法，如：grunt-sprite、gulp-tmtsprite
我理想中的工作流
一个人，想某件事，想得多了，就会有所行动，比如我曾经喜欢的妹子，现在成了我的老婆。。。。。
不好意思，扯远了，继续讲我想要的工作流模式。
结合公司的工作模式和实际业务实践，我把一个这个流程分成两个过程：开发过程和布署过程。
1.开发过程
当我开始开发时，我希望是所见即所得的，我的每一次代码编辑，都能即时的响应反馈在我面前;我用的是能提升我效率的CSS预处理语言，我希望她能即时的帮我编译成CSS;我用rem,但我写的是px，我希望她能帮我转换……
我想要的开发过程很简单，就是能帮我提升效率！
2.布署过程
开发完后，终于到了要发布的时候了。发布前，需要生成可以放到生产环境中的代码，而这个过程，要做的工作有非常多，大概有如下：
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，满足各类开发者
所有项目共享一个node_modules，只需一次npminstall即可
可定制的，你可以根据自己的需求修改实现你自己想要的功能
自带rem适配方案、智能Webp解决方案、去缓存文件Reversion(MD5)解决方案
快速开始
以下2种方式任选，请确保已安装Node.js环境
使用Yoeman脚手架generator-workflow自动安装（推荐）：
npminstall-ggenerator-workflow
yoworkflow
直接下载安装：
全局安装Gulp4，执行：npminstallgulpjs/gulp#4.0-g
点击下载tmt-workflow，进入根目录执行：npminstall
注1：Gulp4目前尚未正式发布，Windows用户请先安装git，
然后在GitBash下执行npminstall即可（非CMD）。
注2：如遇npminstall网络问题，推荐尝试pm安装环境依赖
工作流目录结构
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//开发目录，由`gulpbuild_dev`任务生成
│├──css
│├──
│├──img
│└──slice//开发阶段，仅从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发布配置
"ftp":{
"host":"xx.xx.xx.xx",
"port":"8021",
"user":"tmt",
"pass":"password",
"remotePath":"remotePath",//默认上传至根目录，此属性可指定子目录路径
"includeHtml":true//FTP上传时是否包含文件
},
//浏览器自动刷新
"livereload":{
"available":true,//开启
"port":8080,
"startPath":/TmTIndex"//启动时自动打开的路径
},
//插件功能
//路径相对于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.开发任务gulpbuild_dev
按照目录结构创建好项目后，执行gulpbuild_dev生成开发文件位于/dev，包含以下过程
完成ejs->和less->css编译
自动文件改动，触发浏览器刷新
注：浏览器刷新功能可在.tmtworkflowrc中进行配置，默认开启。
2.生产任务gulpbuild_dist
开发完成后，执行gulpbuild_dist生成最终文件到/dist目录，包含以下过程：
LESS/EJS编译
CSS/JS/IMG压缩合并
slice图片合并成雪碧图
文件添加版本号
WebP图片支持
3.FTP部署gulpftp
依赖于生产任务，执行后，会先执行gulpbuild_dist，然后将其生成的/dist目录上传至.tmtworkflowrc指定的FTP服务器。
4.打包任务gulpzip
依赖于生产任务，执行后，会先执行gulpbuild_dist，然后将其生成的/dist目录压缩成zip格式。
注1：./src为源文件目录，/dev和/dist目录为流程自动生成的目录。
注2：FTP和zip任务执行后会自动删除/dist目录。
使用预览
推荐配合WebStorm等编辑器的Gulp任务管理器使用更佳。
tmt-workflow具有良好的定制性和扩展性，用户可针对自身团队的具体需求定制，更多可查看：
Github:https://github/weixin/tmt-workflow
Wiki:https://github/weixin/tmt-workflow/wiki
最后，或许你会问：为什么叫tmt-workflow？
TmT:我们的组名，TencentMoeTeam。
工作流的名字随意，你也可以根据你们自己的习惯自由发挥，比如Aoisola、YuiHatano、TakizawaRola。
