轩枫阁

首页 / Web前端 / tmt-workflow前端工作流

tmt-workflow前端工作流

前言

在日常的前端开发中,我们会遇到 LESS/SASS 编译、CSS 前缀自动补全 、CSS压缩、 图片压缩、JS合并压缩、布署发布 等各种各样的操作。通常,我们都会根据实际情况定制一个流程性的工具来实现所有常规的功能,即所谓的前端工作流。tmt-workflow为微信TmT团队研发的工作流。

tmt-workflow

tmt-workflow 是一个基于 Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。

现已推出 GUI 桌面工具:WeFlow,无需安装任何环境依赖即可使用,官网下载:http://weflow.io/

功能特性

除了以上的各种功能,其余特性:

  1. 基于 Gulp4 ,超好用的流程化(gulp.series, gulp.parallel)控制 API,更高的性能
  2. 跨平台的,支持 Win 和 Mac,满足各类开发者
  3. 所有项目共享一个 node_modules,只需一次 npm install 即可
  4. 可定制的,你可以根据自己的需求修改实现你自己想要的功能
  5. 自带 rem适配方案智能 Webp 解决方案去缓存文件 Reversion (MD5) 解决方案

快速开始

以下 2 种方式任选,请确保已安装 Node.js (已经支持到 Node 6) 环境

  • 使用 Yoeman 脚手架 generator-workflow 自动安装(推荐):
    • npm install -g generator-workflow
    • yo workflow
  • 直接下载安装:
    1. 全局安装 Gulp 4,执行:npm install gulpjs/gulp#4.0 -g
    2. 点击下载 tmt-workflow,进入根目录执行: npm install

注1:Gulp 4 目前 尚未正式发布,Windows 用户请先安装 git
然后在 Git Bash 下执行 npm install 即可(非 CMD)。

注2:如遇 npm install 网络问题,推荐尝试 cnpm 安装环境依赖

目录结构

工作流目录结构

项目目录结构

配置文件.tmtworkflowrc

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

任务说明

注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 图片合并成雪碧图
  • 文件添加版本号
  • 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,无需安装环境依赖,获得可视化的操作体验。

77a67476-ea25-11e5-9cf3-eebf56ffbe03

其它说明

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

参考

我理想中的前端工作流

tmt-workflow

66/470
68/470

相关阅读

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子