tmt-workflow
tmt-workflow 介绍
功能特性
自动化流程
Less -> css (Sass 可自行定制)
css Autoprefixer 前缀自动补全
自动生成图片 css 属性，width & height 等
css 压缩 cssnano
css Sprite 雪碧图合成
Retina @2x & @3x 自动生成适配
imagemin 图片压缩
js 合并压缩
Ejs 模版语言
调试 & 部署
监听文件变动，自动刷新浏览器 (LiveReload)
FTP 发布部署
ZIP 项目打包
解决方案集成
px -> rem 兼容适配方案
智能 WebP 解决方案
去缓存文件 Reversion (MD5) 解决方案
快速开始
以下 2 种方式任选，请确保已安装 Node.js 环境
使用 Yoeman 脚手架 generator-workflow 自动安装（推荐）：
npm install -g generator-workflow
yo workflow
直接下载安装：
全局安装 Gulp 4，执行：npm install gulpjs/gulp#4.0 -g
点击下载 tmt-workflow，进入根目录执行： npm install
注1：Gulp 4 目前 尚未正式发布，Windows 用户请先安装 git，
然后在 Git Bash 下执行 npm install 即可（非 CMD）。
注2：如遇 npm install 网络问题，推荐尝试 cnpm 安装环境依赖
目录结构
工作流目录结构
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
项目目录结构
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
网站地址:https://weflow.io/
GitHub:https://github.com/Tencent/tmt-workflow
网站描述:一个基于 Gulp(v4.0)、高效、跨平台(Mac & Win)、可定制的前端工作流程
tmt-workflow官方网站
官方网站：https://weflow.io/