轩枫阁

前言

本文将介绍如何将基于WP的项目，结合前端工作流tmt-workflow，实现开发、体验、部署上线流程，流程简单，自定义程度高。

tmt-workflow

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

介绍文章：tmt-workflow前端工作流 查看全文

前言

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

tmt-workflow

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

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

功能特性

• 自动化流程
  • Less/Sass -> CSS
  • CSS Autoprefixer 前缀自动补全
  • 自动生成图片 CSS 属性，width & height 等
  • CSS 压缩 cssnano
  • CSS Sprite 雪碧图合成
  • Retina @2x & @3x 自动生成适配
  • imagemin 图片压缩
  • JS 合并压缩
  • EJS 模版语言
• 调试 & 部署
  • 监听文件变动，自动刷新浏览器 (LiveReload)
  • FTP 发布部署
  • ZIP 项目打包
• 解决方案集成
  • px -> rem 兼容适配方案
  • 智能 WebP 解决方案
  • 去缓存文件 Reversion (MD5) 解决方案

除了以上的各种功能，其余特性：

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

查看全文