最近工作之余，在做自己的博客网站，遇到一个比较蛋疼的事：每次写完前端的代码总是要重新编译代码，打包，上传到服务器，替换旧的文件...总之要做一大堆琐碎且费时间的事...
因此有了这篇文章
首先，介绍一下VSTS。VSTS的全称是Visual Studio Team System，是由微软开发的一套具有高生产力、高集成性、可扩展的生命周期开发工具，VSTS使得整个开发团队拥有更好的沟通与合作，并且保证了更好的质量。By the way，it's free.只需要一个Microsoft账号.
进入VSTS首页，这里会罗列出自己的私人项目
点击进入我们Angular项目，选择Build And Release
再点击New，进入下个界面
选中第一个VSTS Git，选择我们需要构建的项目，点击Continue，进入下一个界面，我们选择一个Empty pipline来构建我们的任务。
在此页面中，我们需要自定义一些编译命令，如同我们在开发机上打包一样。
首先我们要执行npm install 命令，点击“+”，搜索 npm，选择Add，如下图
这里需要注意的是，我们需要选择执行目录，也就是package.json所在的文件路径目录。
然后再添加Command Script进行编译，打包。
在Script里输入:
npm install -g @angular/cli
ng build --prod
cd dist
zip -q -r dist.zip *
复制代码最后再添加一个Task，搜Publish Build Artifacts,选择add添加
注意Path to publish路径，可以选择当前package.json项目路径，后面接着加"/dist/dist.zip"，这个路径是上一步编译打包的路径。
最后点击Save&queue 或者 Save即可，点击Save&queue会立即执行编译打包操作。如果立即执行操作，返回Builds，可以看到正在执行的任务。
点击#1进入上图页面，可以查看编译，打包的日志。
好，如果上面的步骤没有问题了，该进入Release步骤了。
点击Release->Create New Definition，再次我们选择Empty Process
点击左边的Add artifact，
这里选择build，再选择之前的项目，选择add即可完成操作。
然后点击上面的Task来执行需要的操作。
这里定义了两个Task，如下：
第一个任务是把我们打包出来的dist.zip文件推送到我们的服务器上去，点击manage，再选择ssh，输入IP地址，账户，密码即可完成服务的添加。输入Target Folder路径。注意，下面的Advance里面我们可以选择"Clean target folder"，我们的目标路径的文件给先清空。
第二个任务则是把我们打包的dist.zip进行解压到服务器的指定目录下。
最后点击保存，即可完成所有操作。
到此，本教程已完成，各位可通过此教程配置完成后提交一次代码查看是否成功!
