文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 00:28

关注

本文主要介绍shell脚本的一些基本用法以及在前端项目中的应用。将围绕以下几点来展开:

一、shell基本介绍及用法

Shell 变量

变量声明如下:

  1. time=10 

注:变量名和等号之间不能有空格,变量名命名规则如下:

我们可以通过如下方式使用变量:

  1. name="xujiang" 
  2. echo $name 
  3. # 或者这样 
  4. echo ${name

我们能使用如下方式删除变量:

  1. unset name 

关于shell变量的更多用法,可以参考linux官网,这里就不过多介绍了。

Shell 传递参数

n。n代表一个数字,1为执行脚本的第一个参数,2为执行脚本的第二个参数,以此类推,其中0 为执行的文件名

使用如下:

  1. echo "文件名:$0"
  2. echo "参数一:$1"
  3. echo "参数二:$2"
  4. echo "参数三:$3"
  5. # 输出 
  6. 文件名:./test.sh 
  7. 参数一:1 
  8. 参数二:2 
  9. 参数三:3 

Shell 数组

Bash Shell 只支持一维数组,数组元素的下标由0开始。Shell 数组用括号来表示,元素用"空格"符号分割开,例如:

  1. names=(name1 ... namen) 

我们可以通过如下方式读取数组:

  1. ${names[0]} 

我们可以使用@ 或 * 可以获取数组中的所有元素,例如:

  1. echo "数组的元素为: ${nsmes[*]}" 
  2. # 输出为 
  3. 数组的元素为: A B C D 

Shell 基本运算符

Shell支持多种运算符,如下:

原生bash不支持简单的数学运算,但是可以通过其他命令来实现,这里我们使用expr。它是一款表达式计算工具,使用它能完成表达式的求值操作。例如:

  1. #!/bin/bash 
  2.  
  3. total=`expr 2 + 2` 
  4. echo "两数之和为 : $total" 

注:这里我们使用反引号``。由于命令行工具这块用的比较少,如果感兴趣,大家可以去官网了解学习。

Shell echo命令

Shell 的 echo 指令与 PHP 的 echo 指令类似,都是用于字符串的输出,这里我们着重介绍与用户交互的输入输出。

  1. #!/bin/sh 
  2. read name  
  3. echo "hello $name" 

read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量。当我们执行脚本后,输入一个自定义名称,按下回车将输出 'hello xxx',我们是不是想到了vue脚手架中的一些命令呢,是的,我们可以用这个方法去实现自己的脚手架配置或者自动生成项目模版。

我们也可以用echo将显示结果定向至文件:

  1. echo "It is mine" > test.js 

执行 这个文件后将为我们创建一个test.js文件,并将输出内容写入test.js。

Shell test 命令

test 命令用于检查某个条件是否成立,它可以进行数值、字符和文件三个方面的测试。

数值测试:

使用方式如下:

  1. name1=1 
  2. name2=1 
  3. if test $[name1] -eq $[name2] 
  4. then 
  5.     echo '相等!' 
  6. else 
  7.     echo '不相等!' 
  8. fi 

运行脚本后将输出'相等!'。

字符串测试:

例如:

  1. name1="xu" 
  2. name2="xu" 
  3. if test $name1 = $name2 
  4. then 
  5.     echo '两个字符串相等!' 
  6. else 
  7.     echo '两个字符串不相等!' 
  8. fi 

Shell 流程控制

流程控制我们主要介绍if else, if else-if else和for循环。

  1. if 条件1 
  2. then 
  3.     命令操作1 
  4. else 
  5.     命令操作2 
  6. fi 
  1. a=1000 
  2. b=2000 
  3. if [ $a == $b ] 
  4. then 
  5.    echo "a 等于 b" 
  6. elif [ $a -gt $b ] 
  7. then 
  8.    echo "a 大于 b" 
  9. elif [ $a -lt $b ] 
  10. then 
  11.    echo "a 小于 b" 
  12. else 
  13.    echo "无" 
  14. fi 
  1. # 一般格式 
  2. for var in a1 a2 ... aN 
  3. do 
  4.     命令1 
  5.     命令2 
  6.     ... 
  7.     命令N 
  8. done 

在了解完如上知识点后,我们来看看这些能做些什么。

二、使用shell脚本自动将项目打包部署到git服务器

一个git提交的例子

  1. #!/bin/bash 
  2. git add . 
  3. git commit -m 'xj--'$1 
  4. git push 
  5.  
  6. # 提交时只需要执行 bash git.sh '参数内容'即可完成提交操作 

首先,我们在项目根目录下新建一个git.sh文件,输入以上脚本,保存,然后我们后面要提交代码时,只需要执行 bash git.sh '你的注释',就可以将代码提交到服务器上了,是不是简化了我们提交的步骤呢

vue项目部署

我在一张图教你快速玩转vue-cli3这篇文章中教大家了如何独立配置项目,文章末尾有写到部署的方式,如下:

  1. #!/usr/bin/env sh 
  2.  
  3. # 当发生错误时中止脚本 
  4. set -e 
  5.  
  6. # 构建 
  7. npm run build 
  8.  
  9. # cd 到构建输出的目录 
  10. cd dist 
  11.  
  12. git init 
  13. git add -A 
  14. git commit -m 'deploy' 
  15.  
  16. git push -f git@bitbucket.org:/.bitbucket.io.git master 
  17.  
  18. cd - 

在学完shell脚本后,是不是觉得豁然开朗了呢。如果有更复杂的需求,我们可以用同样的方式去部署。

三、使用nodeJs编写命令行工具

我们这里使用commander来搭建node命令行,接下来我会给出最基本的用法,下一篇文章将专门来给大家讲解如何搭建一个高可用的node命令行工具,在此之前,大家可以自由摸索,也许会有更好的方式。

  1. // 1.构建项目目录 
  2. mkdir xxx 
  3. cd xxx 
  4. npm init 
  5.  
  6. // 2.安装commander模块 
  7. npm install commander --save 
  8.  
  9. // 3.新建bin/[你自定义的命令行文件名] 
  10. #!/usr/bin/env node 
  11.  
  12. var program = require('commander'); 
  13.  
  14. program.version('0.0.1'); 
  15.  
  16. program 
  17.     .command('help'
  18.     .description('显示使用帮助'
  19.     .action(function() { 
  20.         program.outputHelp(); 
  21.     }); 
  22.  
  23. program 
  24.     .command('create [dir]'
  25.     .description('创建一个空博客'
  26.     .action(function(dir) { 
  27.         console.log('create %s', dir); 
  28.     }); 
  29.  
  30. program 
  31.     .command('preview [dir]'
  32.     .description('实时预览'
  33.     .action(function(dir) { 
  34.         console.log('preview %s', dir); 
  35.     }); 
  36.  
  37. program 
  38.     .command('build [dir]'
  39.     .description('生成整站静态HTML'
  40.     .option('-o, --output ''生成的静态HTML存放目录'
  41.     .action(function(dir) { 
  42.         console.log('创建 %s, 输出 %s', dir, options.output); 
  43.     }); 
  44.  
  45. // 开始解析命令 
  46. program.parse(process.argv); 
  47.  
  48. // 4.在package.json目录下执行关联操作 
  49. npm link 
  50.  
  51. // 5.测试,输入相关命令即可执行对应操作 
  52. xxx help 

 本文转载自微信公众号「趣谈前端 」,可以通过以下二维码关注。转载本文请联系趣谈前端 公众号。

【编辑推荐】

  1. 网络卡顿不着急换新机试试这几招调整
  2. 消灭密码?定期重置?准备好颠覆认知吧!
  3. 谷歌也看不下去了!安卓内存巨大但为何还杀后台
  4. 甚至比Excel还好用?WPS这几项功能真香
  5. 微软Windows 11/Windows 10 一个命令安装 Windows Linux 子系统(WSL)
【责任编辑:姜华 TEL:(010)68476606】

 

来源:趣谈前端 内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯