前端开发人员的bash壳脚本简介
#javascript #bash #scripting

我是使用大量CLI的前端开发人员，它运行了一些命令来生成最终项目或执行任务。我听说过贝壳脚本，但从未尝试过。

每天，我使用终端中的一些外壳命令，例如：

  1. cd：更改当前的工作目录。

  2. ls：在目录中列出文件。

  3. pwd：打印当前的工作目录。

  4. touch：创建一个空文件。

  5. grep搜索到一个文件中并显示包含该单词的行。

  6. mkdir：创建一个新目录。

  7. rm：删除文件或目录。

  8. cp：复制文件。

我决定对外壳脚本有基本的了解，并且该节目可能有助于前端开发任务。

什么是贝壳脚本？

开始之前，什么是壳脚本？它可以帮助我们在壳环境中自动化任务或声明事物。 shell脚本是一个简单的文本文件，其中包含shell命令序列执行，我们可以将其用于：

  • 自动化：自动重复任务，例如设置开发环境，运行测试或部署代码。

  • 环境：自定义您的外壳环境，例如为常用命令创建别名或设置环境变量以配置我们的工具。

  • 构建和部署：编写一个shell脚本以自动化构建和部署过程以简化它。

写我的第一个脚本

注意：我正在使用Windows for Windows随附bash，所以我正在使用终端bash。

我们将在终端中创建第一个Hello World，打开文本编辑器，添加以下行，然后保存名称。 hello.sh：

#!/bin/bash
echo "Hello World"

在第一行，我们添加了一些称为shebang行的东西。它指定要使用的shell解释器来运行脚本。首先，我们必须通过运行chmod +x hello.sh使其可执行，然后通过键入./hello.sh来运行脚本。

$ ./hello.sh
Hello World

变量

我们可以声明一个变量以存储在shell脚本中的值并在不同命令之间传递值。例如，我们声明一个可变的version并将其分配为“ 1.0”。语句echo用版本打印消息。

#!/bin/bash
version="1.0"
echo "we are using $version"

循环

我们可以使用for循环在列表上迭代。例如，我们使用for and do;
有一个名称列表 

#!/bin/bash
version="1.0"
names="dany edgar bezael"
for name in $names; do
  echo "Hi $name"
done

功能

我们可以定义函数以封装复杂的逻辑，并且我们的脚本更易于使用function关键字并传递参数。可以使用$n语法在函数中访问它，其中n是从1开始的参数位置。

#!/bin/bash
version="1.0"
names="dany edgar bezael"

function congrats {
    echo "hi, how are you $1"
}

for name in $names; do
  congrats $name
done

运行脚本并查看结果：

$ ./hello.sh
hi, how are you dany
hi, how are you edgar
hi, how are you bezael

读取命令输出

有时我们希望通过一个命令ls获取输出并使用输出执行操作。对于这些情况，我们使用$（），该$（）用于bash执行命令替换并将命令的结果存储在变量中。

使用$(ls)将变量names的名称更改为files以获取目录中的文件列表。

version="1.0"
##execute the ls command
files=$(ls)

function congrats {
    echo "hi, how are you $1"
}

for fileName in $files; do
  congrats $fileName
done

运行脚本并查看结果：

$ ./hello.sh
hi, how are you articles
hi, how are you astro-and-morty
hi, how are you dany.sh
hi, how are you desktop.ini
hi, how are you guide.docx
hi, how are you hello.sh
hi, how are you nba.csv
hi, how are you payments.sh
hi, how are you ~$Qwik.pptx
hi, how are you ~$tpsLocal.docx

脚本执行每个文件的祝贺。有了基本概述，我们可以创建一个脚本来完成多个任务：

  • 自动化前端项目的构建过程。例如，您可以使用脚本来编译您的SASS文件，缩小JavaScript文件或将文件从一个位置复制到另一个位置。

  • 我们可以使用脚本将您的代码上传到远程服务器或在部署之前运行一系列测试。

  • 我们可以使用脚本安装所需的软件包或启动本地开发服务器。

有条件的话

在来自Carlos Augusto的反馈后，添加if and extere

当条件为true时，我们可以使用if语句在bash shell脚本中执行代码块，其中[condition]是任何有效的bash表达式，可以评估为真或false。

。

我们有一些评估条件的选项，例如使用IF：

  1. 两个值之间的平等：if [ "$value1" = "$value2" ]; then

  2. 两个值之间的不等式：if [ "$value1" != "$value2" ]; then

  3. 如果一个值大于或等于其他值：if [ "$value1" -ge "$value2" ]; then

  4. 如果存在文件：if [ -f "$filename" ]; then

  5. 如果存在目录：if [ -d "$dirname" ]; then

  6. 如果给定的字符串的长度为零或不为if [ -z $1 ]。

    if带有[ ]，然后是then，以指示结果在true时的操作，我们可以使用!操作员否定结果。

    。

示例：

#!/bin/bash
# assign value to variable 'name'
name="dany"
# check if name have value
if [ -z $name ]; then
    echo "Hi $name"
else
    # name is empty
    echo "Sorry , please set a name"
fi

在此示例中，脚本将输出“ hi dany”，因为名称具有值。

场景“脚手架我的项目”

我们想创建一个脚本来生成一个具有目录列表的角度项目，并默认情况下提交第一个更改。

让我们解释每一行：

  • 用您的编辑器创建一个空文件koude37sh

  • 创建一个变量以存储项目名称projectName并使用$1

    • 从终端读取参数

  • 使用if [ -z "$1" ]和exit在没有参数的情况下停止脚本（感谢Carlos Augusto）。

  • 声明目录列表“页面组件存储”列表

    • 的另一个变量

  • 使用angular/cli运行npx，以使用$projectName变量生成项目。

  • 使用cd

    • 输入projectName和src目录

  • 打印“生成目录”。使用echo

  • 使用for迭代目录列表

  • 使用命令mkdir创建它。

  • 完成后，使用git命令初始化git并添加并提交更改。

最终代码是：

#!/bin/bash
version="1.0"
#validate that the user passed the parameter
if [ -z "$1" ]
then
     echo "Please add the parameter to script ex: ./scaffold.sh blog"
    exit
fi
#get the project name parameter
projectName=$1
#set a list of directories to create
listOfDirectories="pages components store"
# use the angular cli to generate
npx -p @angular/cli ng new $projectName
cd $projectName
cd src
echo "Generate directories"
#create the list of directories 
for directory in $listOfDirectories; do
  mkdir $directory
done
# initialize git and commit the changes
git init
git add .
git commit -m "basic template"

运行该项目通过参数像koude50 blog一样，它使用默认目录生成Angular项目并进行更改。

它节省了时间并帮助公司为样板创建相同的目录结构。

此示例显示了如何使用Shell脚本来自动化许多其他任务，例如伸长码，运行测试或将代码部署到远程服务器。

源代码：

https://gist.github.com/danywalls/193e46e42751e209760f29c1d3215b51

下一步

总而言之，Shell脚本是一种强大的工具，可以帮助前端开发人员自动化任务并自定义其开发环境。有了对外壳脚本概念的基本了解，前端开发人员可以使用Shell脚本来改善其工作流程并提高开发过程。

还有更多的学习，包括更高级的概念。您可以在线找到更多资源来继续学习。