• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Tencent/tmt-workflow: A web developer workflow used by WeChat team based on Gulp ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

Tencent/tmt-workflow

开源软件地址(OpenSource Url):

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

开源编程语言(OpenSource Language):

CSS 36.9%

开源软件介绍(OpenSource Introduction):

项目迁移说明

由于业务调整,本项目不再更新,感谢大家一直以来的支持。
后续需求会合并到 Feflow 项目进行开发迭代,请移步:

tmt-workflow Version Number

Build Status Win Build status devDependencies License

一个基于 Gulp、高效、跨平台(macOS & Win)、可定制的前端工作流程。
现已推出 GUI 桌面工具:WeFlow,无需安装任何环境依赖即可使用,官网下载:http://weflow.io/

功能特性

快速开始

请确保已安装 Node.js (已支持到最新版,如:v5+, v8, v9 等)

  1. 全局安装 Gulp,执行:npm install gulp-cli -g
  2. 点击下载 tmt-workflow,进入根目录执行: npm install

推荐使用 yarn 安装环境依赖,详见yarn 注1:Windows 用户请先安装 git,然后在 Git Bash 下执行 npm install 即可(非 CMD)。

注2:如遇 npm install 网络问题,推荐尝试 cnpmNPM腾讯云分流 安装环境依赖

目录结构

工作流目录结构

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/
│   │   │   ├── lib-reset.less
│   │   │   ├── lib-mixins.less
│   │   │   └── lib-rem.less
│   │   └── style-index.less        // CSS 编译出口文件
│   │ 
│   ├── html
│   ├── media                     // 存放媒体文件,如 bgm.mp3 abc.font 1.mp4 等
│   ├── img                       // 存放背景图等无需合并雪碧图处理的图片
│   └── slice                     // 切片图片素材,将会进行雪碧图合并,同名 @2x 图片也会合并
│       ├── icon-shake.png
│       └── [email protected]
│
├── dev                           // 开发目录,由 `gulp build_dev` 任务生成
│   ├── css
│   ├── html
│   ├── media
│   ├── img
│   └── slice                     // 开发阶段,仅从 src/slice 拷贝至此,不做合并雪碧图处理
│
└── dist                          // 生产目录,由 `gulp build_dist` 任务生成
    ├── css
    ├── html
    ├── media
    ├── img
    └── sprite                    // 将 /src/slice 合并雪碧图,根据 /css 文件名,命名为 style-*.png 
        ├── style-index.png
        └── [email protected]

配置文件 .tmtworkflowrc

.tmtworkflowrc 配置文件为隐藏文件,位于工作流根目录,可存放配置信息或开启相关功能,详见WiKi
如:FTP 配置信息、开启 WebP功能,开启 REM 支持等。

{
  // FTP 发布配置
  "ftp": {
    "host": "xx.xx.xx.xx",
    "port": "8021",
    "user": "tmt",
    "pass": "password",
    "remotePath": "remotePath",         // 默认上传至根目录,此属性可指定子目录路径
    "includeHtml": true                 // FTP 上传时是否包含 .html 文件
  },

  // 浏览器自动刷新
  "livereload": {
     "available": true,                 // 开启
     "port": 8080,
     "startPath": "html/TmTIndex.html"  // 启动时自动打开的路径
  },

  // 插件功能

  // 路径相对于 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

  "supportChanged": false,              // 开启 只编译有变动的文件

  "reversion": false                    // 开启 新文件名 md5 功能
}

任务说明

注1:./src 为源文件(开发目录),/dev/dist 目录为流程自动生成的临时目录
注2:FTPzip 任务执行后会自动删除 /dist 目录。

1. 开发任务 gulp build_dev

按照目录结构创建好项目后,执行 gulp build_dev 生成开发文件位于 /dev,包含以下过程

  • 完成 ejs -> htmlless -> css 编译
  • 自动监听文件改动,触发浏览器刷新

注:浏览器刷新功能可在 .tmtworkflowrc 中进行配置

执行后 Demo 预览:project/dev/html/index.html

2. 生产任务 gulp build_dist

开发完成后,执行 gulp build_dist 生成最终文件到 /dist 目录,包含以下过程:

  • LESS/EJS 编译
  • CSS/JS/IMG 压缩合并
  • slice 图片合并成雪碧图
  • SVG 内联压缩打包合并
  • 文件添加版本号
  • WebP 图片支持

执行后 Demo 预览:project/dist/html/index.html

3. FTP 部署 gulp ftp

依赖于 生产任务,执行后,会先执行 gulp build_dist ,然后将其生成的 /dist 目录上传至 .tmtworkflowrc 指定的 FTP 服务器。

4. 打包任务 gulp zip

gulp build_dist 生成 dist 目录压缩成 zip 格式。

更多详细说明 参见 WiKi

使用预览

推荐配合 WebStorm 等编辑器的 Gulp 任务管理器 使用,体验更佳。

也可配合桌面工具:[WeFlow],无需安装环境依赖,获得可视化的操作体验。

tmt-workflow yo

其它说明

tmt-workflow 具有良好的定制性扩展性,用户可针对自身团队的具体需求,参看以下文档进行定制:

参与贡献

如果你有 Bug反馈功能建议,请创建 Issue 或发送 Pull Request,非常感谢。

腾讯开源激励计划 鼓励开发者的参与和贡献,期待你的加入。

License

所有代码采用 MIT License 开源,可根据自身团队和项目特点 fork 进行定制。




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap