易迅前端工具盒介绍（一）——构建功能

前阵学习了 Electron，于是趁热打铁，开发了一个应用，定名叫“易迅前端工具盒”，以下简称“盒子”。由于是一个泛用性的工具，之后会开源放出。

目前第一阶段的功能已经开发完毕，在这里介绍一下，就是构建功能。

我们目前团队人员配置并不多，但是前辈们留下了多个的 SVN 仓库，每个仓库中又可以按模块（对应我们的发布系统中的模块）划分成 N 多个子项目。由于历史原因，每个子项目都拥有独立的构建方案（听说当初一个 team 负责一个子项目），有 gulp、grunt、ant、r.js 等。有些干脆都没留下构建工具的配置文件，只能靠自己摸索文件压缩、合并的规律，然后照着规律重新架起一套工具。

多套构建方案分部在不同的 SVN 仓库，不同的目录路径下，这给我们带来了不小的麻烦。通常要找到一个构建方案部署的目录并执行需要花费 1 分钟左右的时间进行查找，有时候甚至需要打开配置文件查找对应的构建命令，着实麻烦。

目前我们会在桌面上保持多个 CMD 窗口，根据 CMD 窗口中的目录以及上一次执行的命令判断是哪一个子项目的构建方案。

常驻任务栏的命令行窗口

所以针对这些问题，我们开发了易迅前端工具盒，意图将各子项目中的构建方案都在盒子中呈现，用更加快捷的方式运行。

目前盒子打开后默认展示构建功能界面。

构建功能界面主要由 3 块构成：

• 任务列表区域：展示构建任务列表；
• 任务信息区域：展示当前选中的任务的相关信息；
• 控制台区域：输出任务执行相关的信息。

构建功能界面

如果需要将一个任务放入盒子中，比如

C:/project/build/>gulp

我们需要分解任务的执行目录与执行命令，即 C:/project/build/ 和 gulp。

然后按下面 3 步骤操作即可：

[1] 在任务列表中点击“添加新任务”；
[2] 在任务信息区域填上任务信息：

• 名称：任务名称，会在列表区域显示；
• 执行目录：任务的执行目录；
• 执行命令：任务的执行命令；
• 描述：任务的详细描述。
  [3] 点击任务信息区域中的保存按钮。

保存后会在盒子的配置文件中更新任务信息。

修改与删除

在任务列表区域选中一个任务后，其任务名称右侧会出现“修改”、“删除”命令，点击修改即可在右侧任务信息区域进行编辑。

任务执行完成后，如果任务有对命令行工具进行输出，那么会被显示在盒子的控制台区域，并用三种颜色表示三种不同的输出结果。

• 绿色：执行成功；
• 橙色：执行失败；
• 红色：系统错误。

任务执行成功

由于核心是使用了 Node 的子进程执行命令，所以除了能执行 gulp、grunt 等构建任务，盒子也能跑其他可在命令行执行的任务。比如我想直接打开 Photoshop。

新建任务：

• 名称：打开PS
• 执行目录：path/to/photoshop/；
• 执行命令：photoshop.exe；
• 描述：直接打开 Photoshop。

保存后执行，Photoshop 就会运行起来啦~

执行带参数的命令

如果需要执行带参数的命令，直接在执行命令中填上参数就可以。

比如：

• 名称：查看 Node 版本号；
• 执行目录：空；
• 执行命令：node -v；
• 描述：查看 Node 版本号。

控制台输出：v0.12.7

盒子的构建功能就介绍到这里，谢谢大家。

谜之音：马萨卡，这是拉普拉斯之盒！？

项目传送门：https://github.com/YIXUNFE/toolbox