转载

我理想中的前端工作流

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

CssGaga

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

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

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

CssGaga 的模式非常值得借鉴学习，特别是它的 雪碧图合成 方式，见过很多优秀的雪碧图插件都是参照其写法，如： grunt-sprite 、 gulp-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)、高效、可定制的前端工作流程。

功能特性

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

基于 Gulp4 ，超好用的流程化(gulp.series, gulp.parallel)控制 API，更高的性能
跨平台的，支持 Win 和 Mac，满足各类开发者
所有项目共享一个 node_modules ，只需一次 npm install 即可
可定制的，你可以根据自己的需求修改实现你自己想要的功能
自带 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 安装环境依赖

工作流目录结构

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

配置文件 `.tmtworkflowrc`

.tmtworkflowrc 配置文件，位于工作流根目录，可存放配置信息或开启相关功能，

如：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    "reversion": false                    // 开启 新文件名 md5 功能 }