我理想中的前端工作流

在日常的前端开发中,我们会遇到 LESS/SASS 编译CSS 前缀自动补全CSS 压缩图片压缩JS 合并压缩布署发布 等各种各样的操作。通常,我们都会根据实际情况定制一个 流程 性的工具来实现所有常规的功能,这,就是我理解的 前端工作流

CssGaga

曾经,使用过一段时间的 CssGaga,为它的强大功能而感到震憾,几乎解决了所有常见的需求。

那一段时间里,习惯了 CssGaga 拖图片即压缩上传,拖 CSS 文件即压缩+合并雪碧图上传,拖啥就做啥。也就是说,你想要做什么操作,就手动拖拉什么文件就好了。

但随着自己慢慢变胖,慢慢的越来越懒,有时候就想,为什么每次完成开发后,要手动拖几次文件,而不是一键就搞定所有必要的功能呢?

CssGaga 的模式非常值得借鉴学习,特别是它的 雪碧图合成 方式,见过很多优秀的雪碧图插件都是参照其写法,如:grunt-spritegulp-tmtsprite

我理想中的工作流

一个人,想某件事,想得多了,就会有所行动,比如我曾经喜欢的妹子,现在成了我的老婆。。。。。

不好意思,扯远了,继续讲我想要的工作流模式。

结合公司的工作模式和实际业务实践,我把一个这个流程分成两个过程:开发过程布署过程

1. 开发过程

当我开始开发时,我希望是所见即所得的,我的每一次代码编辑,都能即时的响应反馈在我面前; 我用的是能提升我效率的 CSS 预处理语言,我希望她能即时的帮我编译成 CSS; 我用 rem, 但我写的是 px,我希望她能帮我转换……

我想要的 开发过程 很简单,就是能帮我提升效率!

2. 布署过程

开发完后,终于到了要发布的时候了。发布前,需要生成可以放到 生产环境 中的代码,而这个过程,要做的工作有非常多,大概有如下:

  • Less/Sass -> CSS
  • CSS Autoprefixer 前缀自动补全
  • CSS 压缩合并
  • CSS Sprite 雪碧图合成
  • Retina @2x & @3x 自动生成适配
  • imagemin 图片压缩
  • JS 合并压缩
  • EJS 模版语言

我希望这个过程是一个命令或一键就可以完成的,而不是多次拖拉生成。

我要的流程其实很简单,就是越简单越好!

下面,介绍一下因此而诞生的解决方案——tmt-workflow

tmt-workflow

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

功能特性

她除了实现了以上设想的各种功能外,还有:

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

快速开始

以下 2 种方式任选,请确保已安装 Node.js 环境

  • 使用 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 配置文件,位于工作流根目录,可存放配置信息或开启相关功能,
如:FTP 配置信息、开启 WebP功能,开启 REM 支持等。

任务简要说明

1. 开发任务 gulp build_dev

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

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

注:浏览器刷新功能可在 .tmtworkflowrc 中进行配置,默认开启。

2. 生产任务 gulp build_dist

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

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

3. FTP 部署 gulp ftp

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

4. 打包任务 gulp zip

依赖于 生产任务,执行后,会先执行 gulp build_dist ,然后将其生成的 /dist 目录压缩成 zip 格式。

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

使用预览

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

tmt-workflow 具有良好的定制性扩展性,用户可针对自身团队的具体需求定制,更多可查看:

Github: https://github.com/weixin/tmt-workflow
Wiki: https://github.com/weixin/tmt-workflow/wiki

最后,或许你会问:为什么叫 tmt-workflow?

TmT : 我们的组名,Tencent Moe Team。
工作流的名字随意,你也可以根据你们自己的习惯自由发挥,比如 Aoi sola、Yui Hatano、Takizawa Rola 。

1 3 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部