上一篇自由发挥的博客丢了，自己已经被气死了，犯了一个大错误在浏览器编辑博客。。。。

这个脚本 大概工时是6天时间，周六日不算，主要耗时在 UI server 和 npm 发包之后的调试上面了。

由于文章都丢了，那么我就回忆着写下

写在前面，本人技术实在有限，如有错误欢迎大佬指正。

说到脚本，前端朋友接触的不多，实际后端同学倒是经常写，但是大前端时代的来临，你是不是应该多一些思考呢，

譬如：vue-cli 为什么在 任意目录下都能执行，譬如 你启动一个 vue-cli ，点击了项目，和要安装的插件，你会发现它给你安装好了，那么你思考过，为什么会安装好嘛，这个问题。🙂。

其实我也是带着这个问题，来进行node 脚本的开发， 实际啊在我看来脚手架的本质就是脚本。

那么，我们分析一波我们的需求

当发布后,安装着运行cli 提示输入项目目录.然后配置图片路径.ui话的需要启动node server 非ui话的直接输入本地图片路径，如果没ui的就全做成配置化的。把两个项目目录跟图片路径配置进去。写入币的sign然后启动commander 调用gulp。跑任务。最好做监听gulp工作流完成的进程，或者在工作流写钩子给外面用.最后检查资源。然后执行shell 调用git 提交代码。



这样一来当你上一个币的时候，你只需要把你的图片覆盖到目录下面，然后写入币的名字。执行就全部完成了。



写sass你需要用node file sys 读文件。然后写好内容保存。

以上就是需求了

好吧过滤下我们的实际需求点，

1. 用户可以自由配置目录地址。

2. 脚本拥有自己改版本号，且自己写css的能力。

3. 脚本拥有启动 gulp 能力且了解执行结束。

4. 脚本有 UI server 交互的能力，也就是在浏览器操作交互的能力。

难点至少有俩个，第一，gulp 本身是没有状态，需要我思考的是如何把俩个项目的4个gulp串联起来且监听他的命令，

第二，监听执行之后结束的动作，通知 UI Server 当前脚本任务已经结束。

好在项目最终完成，所以我们的最终解决了上面俩个问题。

项目起步：

commander.js

co-prompt

co

模块

为交互必备模块

常见的插件模块参见这篇文档就OK了

https://www.kancloud.cn/outsider/clitool/313188

我的代码里也有，最终会放上我github的地址，大家可以去看眼。

说到监听，直接上代码

 const bd = shell.exec('npm run build', { silent: false }, function (code, stdout, stderr) {
    })
 bd.stdout.on('data', (data) => {})

还是 shell 插件启动一个子进程专门去处理这个事， 在使用官方的API bd.stdout.on 启动监听，可以在 gulp end 的时候抛出的值。

本质还是 node 对自己的子进程进行监听。

其实难点还是在于流程控制上面，怎么优雅的串联2个项目， 4条脚本命令，以及脚本执行完毕对UI server端进行通知。 现在串联这一个版本还是使用回调函数的形式。 UI server 的通知写了一个接口轮询，即浏览器端不断对服务进行请求，查看当前gulp脚本的状态。

我从网上查了一下：

const events = require('events') // 引入事件模块

就是node 本身自带的事件模块代码，类似于之前的事件派发。还是通过回调的方式通知到 UI server 我觉得这套代码系统可以实现的更加优雅，但是限于本身代码实力所限，功能虽然可用，但是在代码实现上，肯定还有更优雅的方式，

再有一个坑就是npm 发布了，后期出现了好多的坑，基本上来说。本地开发的是时候，是要npm-link的， 这个link的意思就是把你这条命令映射到全局函数。你就可以在本地进行开发以及使用调试了。

上面俩个截图是我自己的，可以明显看出映射的地址。 这个命令实际上找的就是全局的项目，每一个包统称为一个项目也不为过。通用的 你去bin 文件夹下面一定可以看见，vue-cli 的快捷方式。 这就回应了我开头的提出的那个问题。正是说有这样的映射，我们的包安装才能够成功。

后来还遇到一个包启动的时候在全局地址的问题。这个问题最终使用：

const path = require('path')
path.resolve(__dirname).split('/dist')[0]

他保证了项目目录地址的相当固定。

本脚本的github 地址

https://github.com/hoyong6/coinup