{"id":14982083,"url":"https://github.com/tencent/tmt-workflow","last_synced_at":"2026-03-11T04:03:52.077Z","repository":{"id":11268143,"uuid":"13672724","full_name":"Tencent/tmt-workflow","owner":"Tencent","description":"A web developer workflow used by WeChat team based on Gulp, with cross-platform supported and solutions prepared.","archived":false,"fork":false,"pushed_at":"2020-07-30T10:34:05.000Z","size":1194,"stargazers_count":2169,"open_issues_count":2,"forks_count":264,"subscribers_count":94,"default_branch":"master","last_synced_at":"2025-04-07T23:05:45.949Z","etag":null,"topics":["gulp","javascript","workflow"],"latest_commit_sha":null,"homepage":"https://github.com/Tencent/feflow","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-18T08:21:44.000Z","updated_at":"2025-04-07T05:39:43.000Z","dependencies_parsed_at":"2022-07-10T03:46:45.082Z","dependency_job_id":null,"html_url":"https://github.com/Tencent/tmt-workflow","commit_stats":null,"previous_names":["hzlzh/grunt-workflow","hzlzh/f2e-workflow"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftmt-workflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftmt-workflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftmt-workflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Ftmt-workflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/tmt-workflow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744333,"owners_count":20988783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","javascript","workflow"],"created_at":"2024-09-24T14:04:45.122Z","updated_at":"2025-12-12T03:02:18.991Z","avatar_url":"https://github.com/Tencent.png","language":"CSS","readme":"## 项目迁移说明\n\n由于业务调整，本项目不再更新，感谢大家一直以来的支持。  \n后续需求会合并到 [Feflow](https://github.com/Tencent/feflow) 项目进行开发迭代，请移步：\n\n* Github: https://github.com/Tencent/feflow\n* 官网：https://feflowjs.com/\n\n# tmt-workflow [![Version Number](https://img.shields.io/npm/v/generator-workflow.svg?style=flat)](https://github.com/Tencent/tmt-workflow/ \"Version Number\")\n\n[![Build Status](https://api.travis-ci.org/Tencent/tmt-workflow.svg)](https://travis-ci.org/Tencent/tmt-workflow \"Build Status\")\n[![Win Build status](https://img.shields.io/appveyor/ci/littledu/tmt-workflow.svg?label=Win%20build\u0026style=flat)](https://ci.appveyor.com/project/littledu/tmt-workflow) \n[![devDependencies](https://img.shields.io/david/dev/weixin/tmt-workflow.svg?style=flat)](https://ci.appveyor.com/project/weixin/tmt-workflow \"devDependencies\") \n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](http://opensource.org/licenses/MIT \"Feel free to contribute.\") \n\n\u003e 一个基于 [Gulp](https://github.com/gulpjs/gulp)、高效、跨平台(macOS \u0026 Win)、可定制的前端工作流程。  \n\u003e 现已推出 GUI 桌面工具：[WeFlow](http://weflow.io/)，无需安装任何环境依赖即可使用，官网下载：http://weflow.io/\n\n## 功能特性\n\n- 自动化流程\n  - [Less/Sass -\u003e CSS](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8C-Less-%E7%BC%96%E8%AF%91)\n  - [CSS Autoprefixer 前缀自动补全](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8D-Autoprefixer)\n  - [自动生成图片 CSS 属性，width \u0026 height 等](https://github.com/Tencent/gulp-lazyimagecss)\n  - [自动内联 SVG 到 CSS](https://github.com/Tencent/gulp-svg-inline)\n  - [CSS 压缩 cssnano](https://github.com/ben-eb/cssnano)\n  - [CSS Sprite 雪碧图合成](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8E-CSS-Sprite)\n  - [Retina @2x \u0026 @3x 自动生成适配](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8E-CSS-Sprite)\n  - [imagemin 图片压缩](https://github.com/sindresorhus/gulp-imagemin)\n  - [JS 合并压缩](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8F-JS-%E5%90%88%E5%B9%B6%E5%8E%8B%E7%BC%A9)\n  - [EJS 模版语言](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%90-EJS-%E6%A8%A1%E7%89%88%E8%AF%AD%E8%A8%80)  \n- 调试 \u0026 部署\n  - [监听文件变动，自动刷新浏览器 (LiveReload)](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%91-LiveReload)\n  - [FTP 发布部署](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%92-FTP-%E5%8F%91%E5%B8%83%E9%83%A8%E7%BD%B2)\n  - [ZIP 项目打包](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%93-ZIP-%E6%89%93%E5%8C%85)\n- 解决方案集成\n  - [px -\u003e rem 兼容适配方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%94-REM-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88)\n  - [智能 WebP 解决方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%95-WEBP-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88)\n  - [SVG 整体解决方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%9A-SVG%E6%95%B4%E4%BD%93%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88)\n  - [去缓存文件 Reversion (MD5) 解决方案](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%96-Reversion-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88)\n\n## 快速开始\n\n请确保已安装 [Node.js](https://nodejs.org/) (已支持到最新版，如：v5+, v8, v9 等) \n\n1. 全局安装 [Gulp](https://github.com/gulpjs/gulp)，执行：`npm install gulp-cli -g`\n2. 点击下载 [tmt-workflow](https://github.com/Tencent/tmt-workflow/archive/master.zip)，进入根目录执行： `npm install`\n\n\u003e 推荐使用 `yarn` 安装环境依赖，详见[yarn](https://yarnpkg.com)\n\u003e 注1：Windows 用户请先安装 [git](http://git-scm.com/)，然后在 [Git Bash](http://git-for-windows.github.io/) 下执行 `npm install` 即可（非 `CMD`）。 \n\u003e  \n\u003e 注2：如遇 `npm install` 网络问题，推荐尝试 [cnpm](http://npm.taobao.org/) 或 [NPM腾讯云分流](https://cloud.tencent.com/document/product/213/8623#.E4.BD.BF.E7.94.A8.E8.85.BE.E8.AE.AF.E4.BA.91.E9.95.9C.E5.83.8F.E6.BA.90.E5.8A.A0.E9.80.9Fnpm) 安装环境依赖\n\n## 目录结构\n\n#### 工作流目录结构\n\n````bash\ntmt-workflow/\n│\n├── _tasks          \t\t// Gulp 任务目录\n│   ├── TaskBuildDev.js     // gulp build_dev\n│   ├── TaskBuildDist.js    // gulp build_dist\n│   ├── TaskFTP.js      \t// gulp ftp\n│   ├── TaskZip.js      \t// gulp zip\n│   │\n│   ├── common\n│   │   └── webp.js\n│   │\n│   ├── index.js\n│   │\n│   ├── lib\n│   │   └── util.js\n│   │\n│   └── plugins       \t\t// 插件目录\n│       ├── TmTIndex.js\n│       └── ftp.js\n│\n├── package.json\n│\n└── project         \t\t  // 项目目录，详见下述项目结构 ↓↓↓\n    ├── src\n    ├── dev\n    ├── dist\n    └── gulpfile.js\n````\n\n#### 项目目录结构\n\n\n````bash\nproject/                          // 项目目录\n├── gulpfile.js                   // Gulp 工作流配置文件\n│\n├── src                           // 源文件目录，`gulp build_dev`阶段会监听此目录下的文件变动\n│   ├── css                       // 存放 Less 文件的目录，只有 style-*.less 的文件名会被编译\n│   │   └── lib/\n│   │   │   ├── lib-reset.less\n│   │   │   ├── lib-mixins.less\n│   │   │   └── lib-rem.less\n│   │   └── style-index.less        // CSS 编译出口文件\n│   │ \n│   ├── html\n│   ├── media                     // 存放媒体文件，如 bgm.mp3 abc.font 1.mp4 等\n│   ├── img                       // 存放背景图等无需合并雪碧图处理的图片\n│   └── slice                     // 切片图片素材，将会进行雪碧图合并，同名 @2x 图片也会合并\n│       ├── icon-shake.png\n│       └── icon-shake@2x.png\n│\n├── dev                           // 开发目录，由 `gulp build_dev` 任务生成\n│   ├── css\n│   ├── html\n│   ├── media\n│   ├── img\n│   └── slice                     // 开发阶段，仅从 src/slice 拷贝至此，不做合并雪碧图处理\n│\n└── dist                          // 生产目录，由 `gulp build_dist` 任务生成\n    ├── css\n    ├── html\n    ├── media\n    ├── img\n    └── sprite                    // 将 /src/slice 合并雪碧图，根据 /css 文件名，命名为 style-*.png \n        ├── style-index.png\n        └── style-index@2x.png\n````\n\n## 配置文件 `.tmtworkflowrc`\n\n`.tmtworkflowrc` 配置文件为**隐藏文件**，位于工作流根目录，可存放配置信息或开启相关功能，[详见WiKi](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8A-%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%B4%E6%98%8E)。  \n_如：FTP 配置信息、开启 WebP功能，开启 REM 支持等。_\n\n```bash\n{\n  // FTP 发布配置\n  \"ftp\": {\n    \"host\": \"xx.xx.xx.xx\",\n    \"port\": \"8021\",\n    \"user\": \"tmt\",\n    \"pass\": \"password\",\n    \"remotePath\": \"remotePath\",         // 默认上传至根目录，此属性可指定子目录路径\n    \"includeHtml\": true                 // FTP 上传时是否包含 .html 文件\n  },\n\n  // 浏览器自动刷新\n  \"livereload\": {\n     \"available\": true,                 // 开启\n     \"port\": 8080,\n     \"startPath\": \"html/TmTIndex.html\"  // 启动时自动打开的路径\n  },\n\n  // 插件功能\n\n  // 路径相对于 tasks/plugins 目录\n  \"plugins\": {\n    \"build_devAfter\": [\"TmTIndex\"],     // build_dev 任务执行完成后，自动执行\n    \"build_distAfter\": [],              // build_dist 任务执行完成后，自动执行\n    \"ftpAfter\": [\"ftp\"]                 // ftp 任务执行完成后，自动执行\n  },\n\n  \"lazyDir\": [\"../slice\"],              // gulp-lazyImageCSS 启用目录\n  \n  \"supportWebp\": false,                 // 开启 WebP 解决方案\n\n  \"supportREM\": false,                  // 开启 REM 适配方案，自动转换 px -\u003e rem\n\n  \"supportChanged\": false,              // 开启 只编译有变动的文件\n\n  \"reversion\": false                    // 开启 新文件名 md5 功能\n}\n```\n\n## 任务说明\n\n\u003e 注1：**`./src`** 为源文件(开发目录)，`/dev` 和 `/dist` 目录为流程**自动**生成的**临时目录**。  \n\u003e 注2：`FTP` 和 `zip` 任务执行后会**自动删除** `/dist` 目录。\n\n**1. 开发任务 `gulp build_dev`**\n\n按照`目录结构`创建好项目后，执行 `gulp build_dev` 生成开发文件位于 `/dev`，包含以下过程\n\n- 完成 `ejs -\u003e html` 和 `less -\u003e css` 编译\n- 自动监听文件改动，触发浏览器刷新  \n\n_注：浏览器刷新功能可在 `.tmtworkflowrc` 中进行配置_\n\n**执行后 Demo 预览：**[project/dev/html/index.html](http://weixin.github.io/tmt-workflow/project/dev/html/index.html)\n\n**2. 生产任务 `gulp build_dist`**\n\n开发完成后，执行 `gulp build_dist` 生成最终文件到 `/dist` 目录，包含以下过程：\n\n- LESS/EJS 编译\n- CSS/JS/IMG 压缩合并\n- slice 图片合并成雪碧图\n- SVG 内联压缩打包合并\n- 文件添加版本号\n- WebP 图片支持\n\n**执行后 Demo 预览：**[project/dist/html/index.html](http://weixin.github.io/tmt-workflow/project/dist/html/index.html)\n\n**3. FTP 部署 `gulp ftp`**  \n\n依赖于 `生产任务`，执行后，会先执行 `gulp build_dist` ，然后将其生成的 `/dist` 目录上传至 `.tmtworkflowrc` 指定的 `FTP` 服务器。\n\n**4. 打包任务 `gulp zip`**  \n\n将 `gulp build_dist` 生成 `dist` 目录压缩成 `zip` 格式。\n\n更多详细说明 [参见 WiKi](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%8B-%E4%BB%BB%E5%8A%A1%E4%BB%8B%E7%BB%8D)\n\n## 使用预览\n\n推荐配合 [WebStorm](https://www.jetbrains.com/webstorm/) 等编辑器的 [Gulp 任务管理器](https://www.jetbrains.com/webstorm/help/using-gulp-task-runner.html) 使用，体验更佳。\n\n也可配合桌面工具：[WeFlow]，无需安装环境依赖，获得可视化的操作体验。\n\n![tmt-workflow yo](https://cloud.githubusercontent.com/assets/1049575/13744821/77a67476-ea25-11e5-9cf3-eebf56ffbe03.gif)\n\n## 其它说明\n\n`tmt-workflow` 具有良好的`定制性`和`扩展性`，用户可针对自身团队的具体需求，参看以下文档进行定制：\n\n* [任务的动态加载机制（高级）](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%97-%E4%BB%BB%E5%8A%A1%E7%9A%84%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E6%9C%BA%E5%88%B6%EF%BC%88%E9%AB%98%E7%BA%A7%EF%BC%89)\n* [自定义任务（高级）](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%98-%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BB%BB%E5%8A%A1%EF%BC%88%E9%AB%98%E7%BA%A7%EF%BC%89)\n* [自定义插件（高级](https://github.com/Tencent/tmt-workflow/wiki/%E2%92%99-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6%EF%BC%88%E9%AB%98%E7%BA%A7%EF%BC%89)\n\n## 参与贡献\n \n如果你有 `Bug反馈` 或 `功能建议`，请创建 [Issue](https://github.com/Tencent/tmt-workflow/issues) 或发送 [Pull Request](https://github.com/Tencent/tmt-workflow/pulls)，非常感谢。\n\n[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。\n\n## License\n\n所有代码采用 [MIT License](http://opensource.org/licenses/MIT) 开源，可根据自身团队和项目特点 `fork` 进行定制。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Ftmt-workflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencent%2Ftmt-workflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Ftmt-workflow/lists"}