翻译：疯狂的技术宅
原文： https://medium.com/dailyjs/ho...
本文首发微信公众号：前端先锋
欢迎关注，每天都给你推送新鲜的前端技术文章
我们在工作中经常会进行很多繁琐的任务：更新配置文件，复制和粘贴文件，更新 Jira 标签等。
慢慢的花在这些任务上的时间会越来越多。我在 2016 年时在一家网络游戏公司工作时，类似的工作很多。当时我在为游戏构建可配置的模板，这项工作也许很有价值，但是由于要重新设置皮肤，我必须把大约70％的时间消耗在制作那些游戏的副本、模板和部署等工作上。
什么是Reskin？
公司 reskin 的定义是使用相同的游戏机制，屏幕和元素的定位，但改变了视觉美学，如颜色和资源等（译者吐槽：实际上就是给游戏换皮。。。）。所以像 “石头剪子布” 这样的简单游戏，我们将创建一个有如下基本资源的模板。
但是当我们创建一个 reskin 时，会使用不同的资源，同时还要保证游戏仍然可以正常工作。如果你玩过像“糖果传奇” 或“疯狂的小鸟”这样的游戏，会发现它们通常会在万圣节，圣诞节或复活节发布很多风格类似的游戏。从商业角度来看这很有意义。现在......让我们回到实施过程。我们的每个游戏都共享相同的 JavaScript 文件，并加载到具有不同内容和资源路径的 JSON 文件中。结果会怎样？
实际上我和其他开发人员的时间表上已经积压了大量的任务，我的第一个想法就是“很多工作都可以进行自动化处理”。每当我创建一个新游戏时，都必须执行以下步骤：
- 对模板存储库进行 git pull 以确保它们是最新的;
- 从主分支创建一个新分支 —— 由 Jira 故障单 ID 进行标识;
- 制作我需要构建的模板的副本;
- 运行 gulp;
- 更新 config.json 文件中的内容。这将涉及资源路径，标题以及服务请求的数据;
- 在本地进行构建，并检查与相关人员的 word 文档匹配的内容。 是的，我知道;
- 与设计师确认他们是否对外观满意;
- 合并到主分支并继续处理下一个分支;
- 更新 Jira 标签的状态，并为相关人员发表评论;
- 清盘并重复。
相比较而言，这比单纯的开发工作多了许多管理上的事情。我以前曾经接触过 Bash 脚本，并通过它来创建一些脚本以减少工作量。其中一个脚本更新了模板并创建了一个新分支，另一个脚本则执行提交并将项目合并到演示和生产环境。
通常手动设置项目需要三到十分钟，部署可能需要五到十分钟。但是根据游戏的复杂程度，也可能需要十分钟到半天。尽管脚本能有所帮助，但仍需要大量的时间用于更新内容或追查丢失的信息。
通过编写代码来缩短时间是远远不够的。我们还需要思考优化工作流程的好方法，以便可以更多地去依赖脚本。比如将内容从 word 文档中移出，并转移到 Jira 标签中，再将其分解为相关的自定义字段。设计人员不是发送公共驱动器上资源所在位置的链接，而是去设置一个内容交付网络（CDN）存储库，其中包含对资源的暂存和发布到生产环境的 URL。
Jira API
这些事情可能需要一段时间才能实施，但我们的流程确实会随着时间的推移而得到改善。我对我们的项目管理工具 Jira 的 API 进行了一些研究，并对正在处理的 Jira 标记做了一些请求，得到了大量有价值的数据，所以我决定将这些请求集成到了自己的 Bash 脚本中，以便能够从 Jira 标记中读到值，并在完成后发布评论和通知相关人员。
从 Bash 过渡到 Node
Bash 脚本很好，但如果有人在 Windows 机器上工作，它们就无法运行了。在做了一些挖掘之后，我决定用 JavaScript 将整个过程包装成一个定制的构建工具。我给这个工具取名为Mason，它将会改变一切。
CLI
当你在终端中使用 Git 时（我假设你在这样做），会发现它有一个非常友好的命令行界面。如果你拼写错误或输入错误的命令，它会友好地对其认为你想要输入的内容提出建议。一个名为 commander的库应能够提供相同的功能，它是我使用的众多库之一。
请参考下面这个简化的代码示例。它正在对命令行界面（CLI）程序进行引导。
src/mason.js
使用 npm，你可以从 package.json 运行一个链接，它将会创建一个全局别名。
npm link它将为我提供一个可以调用的命令，被称为 mason。所以每当我在终端中调用 mason 时，它将运行 mason.js 脚本。所有任务都属于一个名为 mason 的综合命令，我每天都用它来构建游戏，节省的时间真的是......令人难以置信。
你可以在下面看到：我将 Jira 标签编号作为参数传给命令。这将会使用 curl 去请求 Jira API ，并获取更新游戏所需的所有信息。然后它将继续构建和部署项目。最后我会发表评论并标记相关人员和设计师，让他们知道工作已经完成。
$ mason create GS-234
... calling Jira API
... OK! got values!
... creating a new branch from master called 'GS-234'
... updating templates repository
... copying from template 'pick-from-three'
... injecting values into config JSON
... building project
... deploying game
... Perfect! Here is the live link
http://www.fake-studio.com/game/fire-water-earth
... Posted comment 'Hey [~ben.smith], this has been released. Does the design look okay? [~jamie.lane]' on Jira.依靠这些我们就完成了关键的步骤！我对整个项目感到非常满意。
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 12个令人惊叹的CSS实验项目
- 世界顶级公司的前端面试都问些什么
- CSS Flexbox 可视化手册
- 过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！
- 从设计者的角度看 React
- CSS粘性定位是怎样工作的
- 一步步教你用HTML5 SVG实现动画效果
- 程序员30岁前月薪达不到30K，该何去何从
- 7个开放式的前端面试题
- React 教程：快速上手指南