当前位置: 首页 > 科技观察

Vue-React项目中不可忽视的自动化部署解决方案

时间:2023-03-20 21:32:40 科技观察

本文主要介绍shell脚本的一些基本用法及其在前端项目中的应用。将围绕以下几点展开:shell的基本使用(变量、循环、参数传递、运算符、过程控制等)使用shell脚本自动打包部署项目到git服务器使用nodeJs编写命令行工具一、shell的基本介绍和使用Shell是用C语言编写的程序。是用户使用Linux的桥梁。业界的shell通常指的是shell脚本。Shell编程和java、php编程一样。只要有一个文本编辑器和一个可以解释和执行的脚本解释器就可以了。Linuxshell有很多种。这里介绍一个常用的开源免费shell——bash。1、Shell变量声明如下:time=10注意:变量名和等号之间不能有空格。变量名命名规则如下:命名只能使用英文字母、数字和下划线,首字符不能以数字开头。中间不能有空格,可以使用下划线(_)。不能使用标点符号。bash中的关键字不能使用(可以使用help命令查看保留关键字)。我们可以这样使用变量:name="xujiang"echo$name#或者echo${name}这种方式。我们可以通过以下方式删除变量:unsetnameabout关于shell变量的更多用法,可以参考linux官网,这里不再过多介绍。2.Shell传递参数我们可以在执行Shell脚本的时候给脚本传递参数,脚本中获取参数的格式为:.代表一个数字,第一个参数执行脚本,第二个参数执行脚本,依此类推,其中n。n代表一个数字,1是执行脚本的第一个参数,2是执行脚本的第二个参数,以此类推,其中0是要执行的文件名如下:echo"filename:$0";echo"参数一:$1";echo"参数二:$2";echo"参数三:$3";#输出文件名:./test.sh参数一:1参数二:2参数三:33.Shell数组BashShell只支持一维数组,数组元素的下标从0开始。Shell数组用括号表示,元素之间用“空格”符号分隔,例如:names=(name1...namen)我们可以这样读取数组:${names[0]}我们可以用@或*获取数组中的所有元素,例如:echo"Theelementsofthearrayare:${nsmes[*]}"#输出的是数组的元素:ABCD4。Shell基本运算符Shell支持各种运算符,如下:算术运算符关系运算符布尔运算符字符串运算符文件测试运算符原生bash不支持简单的数学运算,但可以通过其他命令实现,这里我们使用expr。它是一个表达式计算工具,可以完成表达式的求值运算。例如:#!/bin/bashtotal=`expr2+2`echo"两个数之和为:$total"注意:这里我们使用了反引号``。由于命令行工具很少用到,有兴趣的可以去官网了解一下。5、Shellecho命令Shell的echo命令类似于PHP的echo命令,都是用来输出字符串的。这里我们重点关注与用户交互的输入和输出。#!/bin/shreadnameecho"hello$name"读取命令从标准输入中读取一行并将输入行的每个字段的值分配给一个shell变量。当我们执行脚本的时候,输入一个自定义的名字,回车,输出'helloxxx'。我们是否想到了vue脚手架中的一些命令?是的,我们可以使用这个方法来实现自己的脚手架配置或者自动生成项目模板。我们也可以使用echo将显示结果定向到一个文件中:echo"Itismine">test.js执行这个文件后,会为我们创建一个test.js文件,输出内容会写入test.js。6.Shell测试命令测试命令用于检查某个条件是否成立,可以进行值、字符和文件三种测试。数值测试:-eq等于真-ne不等于真-gt大于等于真-ge大于等于真-lt小于真-le小于等于真用法如下:name1=1name2=1iftest$[name1]-eq$[name2]thenecho'equal!'elseecho'不相等!'fi将输出'相等!'运行脚本后。字符串测试:=如果相等则为真!=如果不相等则为真-z字符串如果字符串长度为零则为真-n字符串如果字符串长度不为零则为真例如:name1="xu"name2="xu"iftest$name1=$name2thenecho'两个字符串相等!'elseecho“两个字符串不相等!”fi7.Shell流程控制流程控制我们主要介绍ifelse、ifelse-ifelse和for循环。ifelseif条件1then命令操作1else命令操作2fiifelse-ifelsea=1000b=2000if[$a==$b]thenecho"a等于b"elif[$a-gt$b]thenecho"a大于thanb"elif[$a-lt$b]thenecho"aislessthanb"elseecho"none"fiforloop#generalformatforvarina1a2...aNdocommand1command2...commandNdone了解以上知识点后,让我们看看这些可以做什么。二、使用shell脚本自动打包部署项目到git服务器1、git提交示例#!/bin/bashgitadd.gitcommit-m'xj--'$1gitpush#你只需要执行bashgit.sh'parametercontent'whensubmitting就可以完成提交操作了首先我们在项目根目录下新建一个git.sh文件,输入上面的脚本,保存,后面我们要提交代码的时候,我们只要需要执行bashgit.sh'yourcomment'把代码提交到服务器,是不是简化了我们提交的步骤?二、vue项目部署一张图教你快速玩转vue-cli3。在这篇文章中,我教你如何独立配置项目。文末写了部署方式如下:#!/usr/bin/envsh#出现错误时中止脚本set-e#Buildnpmrunbuild#cd到构建输出的目录cddistgitinitgitadd-agitcommit-m'deploy'gitpush-fgit@bitbucket.org:/.bitbucket.io.gitmastercd-学完shell脚本,是不是觉得豁然开朗?如果有更复杂的需求,我们可以用同样的方式进行部署。3、使用nodeJs编写命令行工具我们这里使用commander搭建node命令行。接下来,我将给出最基本的用法。下一篇文章将具体讲解如何搭建一个高可用的node命令行工具。在此之前,大家可以自由探索,说不定还有更好的办法。//1。构建项目目录mkdirxxxcdxxxnpminit//2。安装指挥官模块npminstallcommander--save//3.创建一个新的bin/[你的自定义命令行文件名]#!/usr/bin/envnodevarprogram=require('commander');program.version('0.0.1');program.command('help').description('显示用法帮助').action(function(){program.outputHelp();});program.command('create[dir]').description('创建一个空博客').action(function(dir){console.log('create%s',dir);});program.command('preview[dir]').description('实时预览').action(function(dir){console.log('preview%s',dir);});program.command('build[dir]').description('为整个站点构建静态HTML').option('-o,--output

','生成的静态HTML存放目录').action(function(dir){console.log('创建%s,输出%s',dir,options.output);});//开始解析命令program.parse(process.argv);//4.在package.json目录npmlink//5中执行相关操作。测试,输入相关命令即可进行相应操作xxxhelp转载本文请联系前端公众号。【小编推荐】如果网络卡了,不用着急换新机。尝试这些技巧来调整和消除密码?定期重置?准备好颠覆认知吧!谷歌受不了了!Android内存大,为什么还是杀后台,比Excel还厉害?WPS的这些功能真香。MicrosoftWindows11/Windows10可一键安装WindowsLinuxSubsystem(WSL)【责任编辑:江华TEL:(010)68476606】