tmt-workflow 介绍
功能 特性
自动 化流程
Less -> css (Sass 可自行定制)
css A utop refixer 前缀 自动 补全
自动 生成 图片 css 属性 ，width & height 等
css 压缩 cssnano
css Sprite 雪碧图合成
Retina @2x & @3x 自动 生成 适配
imagemin 图片 压缩
js 合并压缩
Ejs 模版语言
调试 & 部署
监听 文件 变动， 自动 刷新浏览器 (LiveReload)
FTP 发布部署
ZIP 项目打包
解决方 案集成
px -> rem 兼容适配方案
智能 WebP 解决方 案
去缓存 文件 reversi on (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
│ ├── TaskBuild dis t.js // gulp build_ dis t
│ ├── 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
├── dis t
└── 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 拷贝至此，不做合并雪碧图处理
│
└── dis t // 生产目录，由 `gulp build_ dis t` 任务 生成
├── 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/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。