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

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


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


  1. shell基本用法(变量,循环,传参,运算符,流程控制等)


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


  1. 使用nodeJs编写命令行工具


1. shell基本介绍及用法


Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁,业界所说的 shell 通常都是指 shell 脚本,Shell 编程跟 java、php 编程一样,只要有一个能编写代码的文本编辑器和一个能解释执行的脚本解释器就可以了。Linux 的 Shell 种类众多,在这里我们介绍一种常用且开源免费的shell——bash。


  1. Shell 变量


变量声明如下:


time=10

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


  • 命名只能使用英文字母,数字和下划线,首个字符不能以数字开头。


  • 中间不能有空格,可以使用下划线(_)。


  • 不能使用标点符号。


  • 不能使用bash里的关键字(可用help命令查看保留关键字)


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


name="xujiang"
echo $name
# 或者这样
echo ${name}

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

unset name

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


  1. Shell 传递参数


我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n。n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推,其中 $0 为执行的文件名


使用如下:


echo "文件名:$0";
echo "参数一:$1";
echo "参数二:$2";
echo "参数三:$3";
# 输出
文件名:./test.sh
参数一:1
参数二:2
参数三:3
  1. Shell 数组


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

names=(name1 ... namen)

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

${names[0]}

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

echo "数组的元素为: ${nsmes[*]}"
# 输出为
数组的元素为: A B C D
  1. Shell 基本运算符


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


  • 算数运算符


  • 关系运算符


  • 布尔运算符


  • 字符串运算符


  • 文件测试运算符


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


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

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


  1. Shell echo命令


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

#!/bin/sh
read name 
echo "hello $name"

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


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


echo "It is mine" > test.js

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


  1. Shell test 命令


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

数值测试:


  • -eq   等于则为真


  • -ne 不等于则为真


  • -gt 大于则为真


  • -ge 大于等于则为真


  • -lt 小于则为真


  • -le 小于等于则为真


使用方式如下:


name1=1
name2=1
if test $[name1] -eq $[name2]
then
    echo '相等!'
else
    echo '不相等!'
fi

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


字符串测试:


  • = 等于则为真


  • != 不相等则为真


  • -z 字符串 字符串的长度为零则为真


  • -n 字符串 字符串的长度不为零则为真


例如:


name1="xu"
name2="xu"
if test $name1 = $name2
then
    echo '两个字符串相等!'
else
    echo '两个字符串不相等!'
fi
  1. Shell 流程控制


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


  • if else


if 条件1
then
    命令操作1
else
    命令操作2
fi
  • if else-if else
a=1000
b=2000
if [ $a == $b ]
then
   echo "a 等于 b"
elif [ $a -gt $b ]
then
   echo "a 大于 b"
elif [ $a -lt $b ]
then
   echo "a 小于 b"
else
   echo "无"
fi
  • for 循环
# 一般格式
for var in a1 a2 ... aN
do
    命令1
    命令2
    ...
    命令N
done

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


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


  1. 一个git提交的例子


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

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


  1. vue项目部署


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


#!/usr/bin/env sh
# 当发生错误时中止脚本
set -e
# 构建
npm run build
# cd 到构建输出的目录
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master
cd -

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


3.使用nodeJs编写命令行工具


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


// 1.构建项目目录
mkdir xxx
cd xxx
npm init
// 2.安装commander模块
npm install commander --save
// 3.新建bin/[你自定义的命令行文件名]
#!/usr/bin/env node
var program = 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 <dir>', '生成的静态HTML存放目录')
    .action(function(dir) {
        console.log('创建 %s, 输出 %s', dir, options.output);
    });
// 开始解析命令
program.parse(process.argv);
// 4.在package.json目录下执行关联操作
npm link
// 5.测试,输入相关命令即可执行对应操作
xxx help

接下来将推出《如何搭建一个高可用的node命令行工具》,欢迎关注。如有更好的shell用途,欢迎在评论区互动,期待+1

目录
相关文章
|
2月前
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是,性能优化是一个持续的过程,需要根据具体的应用场景和性能问题进行针对性的优化。同时,不同的项目和团队可能有不同的优化重点和方法,要结合实际情况灵活运用这些优化策略,以达到最佳的性能效果。
117 51
|
2月前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
46 1
|
2月前
|
JavaScript 前端开发 开发者
React和Vue有什么区别?
React 和 Vue 都有各自的优势和特点,开发者可以根据项目的需求、团队的技术背景以及个人的喜好来选择使用。无论是 React 还是 Vue,它们都在不断发展和完善,为前端开发提供了强大的支持。
151 2
|
2月前
|
JavaScript 前端开发 测试技术
React和Vue的性能对比如何?
需要注意的是,性能不仅仅取决于框架本身,还与开发者的代码质量、架构设计以及项目的优化程度等密切相关。因此,在评估性能时,应该综合考虑多个因素,而不是仅仅局限于框架之间的比较。
171 1
|
2月前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
2月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
2月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
41 0
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
92 9
|
3月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
2月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
198 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
下一篇
开通oss服务