真▪一行代码完成从前端代码build到部署线上

在经历了6,7个项目同时开工，频繁发布测试 ，不得不学会一点偷懒的小技巧来提升效率了，因此这篇文章要讲的就是如何更加优化发布流程。

工做以来，经历了build后，而后用FileZilla上传服务器完成部署。再到前端打包后 ，在build仓库执行git push,后端在自动部署。后端的自动部署的确简化了不少操做，不过对于前端来讲 ，每次发布还须要去build仓库执行push操做，特别是发布频繁的时候，不免会减低效率 ，这种重复操做仍是让脚原本执行比较合适。因此接下来就是围绕如何只须要执行npm run build 就完成项目发布。

（本文所讲的都是基于windows系统和node环境，各个系统的脚本语言可能有所偏差，基本思路不变）

本文分为两部分，第一部分主要讲的是前端的打包发布的优化过程 ，第二部分简单介绍一下后端的自动部署原理。

一：前端发布优化

首先要明确的是目前大部分前端项目的build过程都是基于node环境，因此优化流程的主要思路就是利用node和操做系统交互，调用系统脚本完成文件copy和git操做。在这咱们要明白在执行npm run build 的时候发生了什么 ，npm run build 只是一个语法糖 ，

在package.json里面能够看到实际上是用node 执行了build/build.js文件，下面咱们就来改写build文件，为了方便对比，我在这贴一下改写先后的build文件，改写前：改写后：

咱们其实不用所有读懂build.js里面作了什么 ，咱们只须要知道再build成功后在何处执行咱们的脚本就能够了， 能够很清楚的看到webpack打包后的回调函数，找到位置后，咱们须要引入children_process，关于这个模块这里说明两点:

1.children_process这个模块提供了衍生子进程的功能，熟悉shell操做童鞋能够利用这个模块作一些有意思的事情，咱们这儿主要利用children_process.exec(commad,options，callback), 主要功能就是建立一个shell，而后在shell里执行命令。执行完成后，将stdout、stderr做为参数传入回调方法。想要详细了解到童鞋能够去node文档看一看

2.就是关于process.argv , 这个提供了获取命令行参数的方法，这个参数就是在执行node命令时后面接的参数 ，好比执行 node build.js a b c , 那么process.argv[1]就是build.js ，process.argv[2]就是a，之内类推。

知道了这两点后，咱们就能够设计咱们的自定义命令了 ， 由于优化的目的就是简化操做 ，因此在build的时候咱们接上咱们的自定义参数，这关系到后面咱们的脚本编写，我设计的命令是 npm run build （push）(commit) (branch) ,这里括号包裹是为了方便表达这是一个自定义变量，实际是没有括号的，三个参数的意思以下：

1.push表示是否打包完直接push到远程；

2.commit 表示push到远程执行git commit -m ‘(提交信息)'，的这里的提交的信息；

3.branch表示git push origin (branch)的那条分支 ， 意味着是发布到正式服务器仍是测试服务器

自定义完参数后咱们在回调里面利用exec()执行咱们的脚本

这时候咱们编写咱们的脚本了 ，咱们新建一个autopush.bat的文件 ，放在咱们的根目录就能够了，脚本内容很简单，大概就是执行了复制粘贴删除和git操做，脚本以下

cd D:\build\test /* 进入build的仓库*/
git checkout %2  /* 切换build仓库的分支*/
rd /s/q D:\build\test\static /* 删除build仓库的static文件夹*/
xcopy D:\source\test\dist D:\build\test /E/I/Y /*从源码仓库的打包后dist的文件夹拷贝并覆盖掉build仓库的文件*/
git add .
git commit -m %1 /*提交代码*/
git push origin %2 /*push到远程，后端执行自动部署*/
cd D:\myFolder\31abc_admin复制代码

这里说明三点：

1.先执行删除build仓库的static，在拷贝并覆盖 ， 是由于改动后每次打包后的js文件名都会变更 ， 不删除的话，不会覆盖重名文件，因此会致使js文件累积；

2.window脚本参数是经过%1得到的，例如%1就是获取第一个参数，%2就是获取第二个参数，这样就能够获取咱们在build.js中执行脚本的时候传入的关于commit和branch的参数了。

3.关于删除和拷贝中参数的意思 ， 

rd /s/q 
      /S 表示删除该目录下全部遍历的子目录和文件
      /Q 删除目录时不提示确认，直接删除
 xcopy 后面的/E/I/Y
      /E 复制全部子目录，包括空目录。
     /I 若是“Source”是一个目录或包含通配符，而“Destination”不存在，“xcopy”会假定“destination”指定目录名并建立一个新目录。而后，“xcopy”会将全部指定文件复制到新目录中。默认状况下，“xcopy”将提示您指定“Destination”是文件仍是目录
      /y 禁止提示确认要覆盖已存在的目标文件。
复制代码

经过以上操做咱们就能够 ，经过npm run build push fix master 一行命令完成打包到push的操做了， 这个时候后端要是设置了自动部署的话，那么，就直接上线了。

二：后端自动部署

关于自动部署的文章，网上已经一大把了，在这儿为了配合这篇文章就简单介绍了自动部署的原理 ， 自动部署的关键就在于webhook ，主流的代码托管平台都有这个功能，包括coding ， github等，在仓库里能够设置，以github为例，大概在这个位置

这里能够填写一个本身服务器的接口地址和一个seret用于验证 ， 填写完了仓库会监听push操做 ， 一旦有push操做，webhook就会发出一个post请求到你设置的接口，而后在服务器端执行脚本进行git pull操做，把最新的代码拉下来，就完成了部署。