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

2018-08-10 admin

在经历了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.jsprocess.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操作,把最新的代码拉下来,就完成了部署。

原文链接:https://segmentfault.com/a/1190000015958893

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37687.html

文章标题:真▪一行代码完成从前端代码build到部署线上

相关文章
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
从 Node.js 分裂出 Io.js 事件看开源软件谁做主
Node.js 作为服务器编程语言的后起之秀,常用来构建和运行 Web 应用,近日却爆出其社区出现分裂。由于对官方运营商 Joyent 公司在 Node.js 管理上的长期不满,多位核心开发者另立门户,创建了分支 Io.js。从 GitHu...
2015-11-12
网站变灰代码
html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: g...
2015-11-12
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
游戏机遇到来 非主流HTML5能否成器?
2014年第四季度以来,有60%的游戏行业从业者已经投入或准备投入开发HTML5为基础的游戏,并对其前景表示乐观的态度。   对HTML 5这项诞生于2008年的标准来说,其正在经历最好的时代。 游戏机遇到来 非主流HTML5能否成器?  ...
2015-11-12
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
回到顶部