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

│ └── [email protected]

│

├── 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

└── [email protected]

网站地址:https://weflow.io/

GitHub:https://github.com/Tencent/tmt-workflow

网站描述:一个基于 Gulp(v4.0)、高效、跨平台(Mac & Win)、可定制的前端工作流程

tmt-workflow

官方网站：https://weflow.io/