YIXUNFE commented 8 years ago

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

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

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

开发缘由

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

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

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

1111

常驻任务栏的命令行窗口

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

构建功能界面

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

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

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

222

构建功能界面

新建任务

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

C:/project/build/>gulp

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

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

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

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

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

修改与删除

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

控制台输出

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

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

333

任务执行成功

其他功能

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

新建任务：

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

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

执行带参数的命令

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

比如：

名称：查看 Node 版本号；
执行目录：空；
执行命令：node -v；
描述：查看 Node 版本号。
控制台输出：v0.12.7

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

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

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

Thanks

jincdream commented 8 years ago

任何命令行方式的工具最终都会走向gui

littledu commented 8 years ago

这里可是通过 spawn('gulp') 的方式去调用命令行执行？

YIXUNFE commented 8 years ago

@littledu 不是 spawn 方法。

使用的是 exec 方法。

具体可以看看 nodejs.org 上的 API。

littledu commented 8 years ago

@YIXUNFE 我有个问题，当你打包了之后，执行 exec 或者 spawn，比如，exec('gulp build'); 要能跑，你需要先进入到有 gulpfile.js 的目录里面去，这个用 node 的 process.chdir 可以进入，完了调用 exec，这个时候，跑的 gulp，用的是你当前项目下的 gulp，还是你打包在 electron 里面的 gulp？理论上，应该是项目下的 gulp

YIXUNFE commented 8 years ago

@littledu

是目录下的 gulp，盒子本身并不将任务工具打包在内。所以使用盒子的前提是你已经配置好了项目的任务。

另外 NodeJS 中 child_process 模块的 exec 方法支持直接设置 cwd（当前工作目录）。

var exec = require('child_process').exec
exec('gulp build', {
  cwd: 'path/to/gulp/project' //在 path/to/gulp/project 目录下执行 gulp build 命令
})

littledu commented 8 years ago

嗯，你的 electron 实现的界面工具，应该没有生成 app 吧，应该是用命令行呼出的吧，不是像 app 一样双击打开

YIXUNFE commented 8 years ago

@littledu 需要自己打包一下哦。

项目中只是源代码。

打包过程还是很简单的，可以体验一下:)

littledu commented 8 years ago

@YIXUNFE 嗯，那你们的是有打包还是没有打包？如果有打包的应该是无法简单的调用 exec(gulp) 才对

YIXUNFE commented 8 years ago

@littledu

除了我之外我们目前使用的是打包的（我在做盒子的其他新功能的开发）。

执行命令和打包与否没关系。命令是在 cwd （即界面上任务的执行目录）下执行的。

YIXUNFE / blog