阅读 56

使用VSTS自动化编译,打包,部署Angular项目(多图)

原文链接: zhuanlan.zhihu.com
最近工作之余,在做自己的博客网站,遇到一个比较蛋疼的事:每次写完前端的代码总是要重新编译代码,打包,上传到服务器,替换旧的文件...总之要做一大堆琐碎且费时间的事...
因此有了这篇文章

首先,介绍一下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进行解压到服务器的指定目录下。

最后点击保存,即可完成所有操作。

到此,本教程已完成,各位可通过此教程配置完成后提交一次代码查看是否成功!