xsj-workflow

一个基于 Gulp(v4.0)、高效、跨平台(macOS & Win)、可定制的前端工作流程。 致力于在工作流每一个环节逐步优化，减少前端重复性工作，提高产品稳定性，提高工作效率，从而让开发人员实现happy coding。

快速开始

由于当前工具只要支撑工作流，所以不建议直接使用以下代码。默认会根据工作区（process.cwd())的位置决定运行目录， 若在当前项目运行会以src目录作为监听路径。

# 安装 
npm install @xfe/xsj-workflow -D

# 开启开发环境 
npm run gulp:dev

# 运行部署环境 
npm run gulp:build

# 上传 
npm run gulp:upload

# 备份 
npm run gulp:archive

实现事项

HTML

• 作为一个开发者，我希望在开发环境工作流中实时编译 HTML。
• 作为一个开发者，我希望在开发环境工作流中实时编译 ejs，并利用 ejs 的语法构建模板，提高代码复用。
• 作为一个开发者，我希望在开发环境工作流中修改（包含增删改查） html 或 ejs 时，浏览器页面实时刷新。
• 作为一个开发者，我希望在开发环境工作流中发生编译错误时能有详细的错误提示。
• 作为一个开发者，我希望在开发环境工作流中允许开发多个页面。

CSS

• 作为一个开发者，我希望在开发环境工作流中实时编译 CSS。
• 作为一个开发者，我希望在开发环境工作流中CSS自动加上前缀。

LESS

• 作为一个开发者，我希望在开发环境工作流中实时编译 Less。
• 作为一个开发者，我希望在开发LESS的过程中使用 source map。

Image

• 作为一个开发者，我希望在部署时工作流能够无损压缩图片。
• 作为一个开发者，我希望在部署时工作流为了能能够大大提高压缩率，允许我采取激进的有损压缩方案。
• 作为一个开发者，由于图片占据网页的主体资源大小，我希望工作流能提供 WebP 方案大大提高压缩率。

测试环境

• 作为一个开发者，我希望通过一个配置自动切换测试环境变量。

部署

• 作为一个开发者，我希望在部署时自动执行E2E测试。
• 作为一个开发者，我不希望生成一个部署的临时文件在项目中。
• 作为一个开发者，我希望在部署时自动生成压缩文件。

其他

• 作为一个开发者，我希望在编译中发生错误不在编译HTML。
• 作为一个开发者，我希望拥有一个代理域名用于完全模拟线上环境调用接口。
• 作为一个开发者，我希望拥有一个配置文件用于设置编译选项。
• 作为一个开发者，我希望可以配置mock server用于模拟线上数据。
• 作为一个开发者，我希望在首次能自动打开浏览器。

E2E测试

• 作为一个开发者，我在部署时检查mock server假数据的存在并做报警处理。

FAQ

为什么使用需要模板引擎而不使用 HTML ？

JavaScript 模板库可以将数据和模板合并然后生成 HTML 文本。其中一个特性可以根据需求划分不同 模板并通过拼装的方式组合成不同的页面。静态HTML无法满足这一点导致代码重复率过高，当遇到需求变更时，往往需要 维护多份一样的代码。

为什么使用ejs而不是其他模板引擎？

对比过其他模板引擎，但出于以下考虑
Jade: Jade 很简洁，python风格，表达能力也很强，直观，但jade 无疑是最独特，上手难度最高，特别是将 html 转成 jade 风格的代码，需要一些成本和适应，特别是空格敏感。

Nunjucks：提供功能强大API函数支持的模板引擎，语法间接易学，但对 gulp 支持一般，用户群体较少，很多功能在当前工作流中用不上，最主要 WebStorm 支持薄弱， 感兴趣的可以在 WebStorm 使用 Swig 文件类型进行开发。

DoT：号称性能最快, 可以预编译, 相关支持不全。

Handlebar：与 Mustache（前端模板引擎），Angular 页面模板代码风格接近，性能比 EJS 高，代码整洁，后续如有需求会考虑加入。

EJS：用户群体较多，容易上手，风格接近 HTML，稳定，拥有模板引擎的基本功能，能让前端开发者用较为平滑的方式从 HTML 过度到 EJS 中。 但目前没有提供 Layout 的概念。

是否值得学EJS？

值得，首先学习成本非常低，语法结构接近原生HTML，WebStorm支持，在 NodeJS 中 Express 和 KOA 被广泛使用。

配置文件使用JS还是JSON？

JSON作为配置文件非常清晰但缺乏灵活性。JS语法可以写成跟JSON无异，但JS能更加灵活的动态做更多事。

说明

WebStorm支持？

由于 WebStorm 当前无疑是市场占有率最高的IDE没有之一，而 WebStorm 新增的特性和功能也间接说明了前端社区用户的需求情况和 前端发展方向。如果WebStorm对某技术的支持说明了该技术的非常值得学习。

拓展

开发初期预留了拓展方式，但并未开放，该拓展后续会参考dora或者apostrophe的代码组织以后后续开发人员以更简单直接的方式接入开发。

后续功能

1. 深入评估handlebar，确定是否存在问题，并引入。 (B)
2. 深度学习fis的核心思想，加入实用功能。(C)
3. 加入持续集成，安全的方式自动部署。(A)
4. 加入changelog自动生成，让文档更清晰。(C)
5. 加入mock server，让开发过程中能够用mock数据测试。(A)
6. 完善但提供简化版配置文件。(B)
7. 加入拓展接口功能，方便其他开发人家集成插件。(C)
8. 考虑是否加入webP支持。(B)
9. 考虑是否直接对移动端支持（出于vue或react的代码组织可能无法直接在gulp下完成）。(C)
10. 设计一个方式让模板接入。(S) 11. 加入全局replace方便替换例如CDN路径。(B)
11. 加入npm配置文件

BUG

1. 在Less或者CSS发生语法（是语法不是结构）期望能报错而不是通过
2. 在任意task报错时，应该立即中断而不是继续执行