مقدمه ای بر اسکریپت Bash Shell برای توسعه دهندگان Frontend

من یک توسعه دهنده فرانت اند هستم که از CLI زیادی استفاده می کنم، که چند دستور را برای تولید یک پروژه نهایی یا انجام وظایف اجرا می کند. من در مورد اسکریپت پوسته شنیده ام اما قبلا آن را امتحان نکرده بودم.

من به صورت روزانه از برخی دستورات پوسته ترمینال استفاده می کنم، مانند:

1. cd: دایرکتوری کاری فعلی را تغییر دهید.

2. ls: فایل ها را در یک فهرست فهرست کنید.

3. pwd: فهرست کاری فعلی را چاپ کنید.

4. touch: برای ایجاد یک فایل خالی.

5. grep در یک فایل جستجو کنید و خطوط حاوی آن کلمه را نمایش دهید.

6. mkdir: یک دایرکتوری جدید ایجاد کنید.

7. rm: یک فایل یا دایرکتوری را حذف کنید.

8. cp: یک فایل را کپی کنید.

من تصمیم گرفتم که درک اولیه ای از اسکریپت نویسی پوسته به دست بیاورم، و نمایش می تواند برای کارهای توسعه front-end مفید باشد.

Shell Scripting چیست؟

قبل از شروع، اسکریپت نویسی پوسته چیست؟ این به ما کمک می کند تا وظایف را خودکار کنیم یا چیزهایی را در محیط پوسته خود اعلام کنیم. پوسته اسکریپت یک فایل متنی ساده است که حاوی دستورات پوسته برای اجرا به ترتیب است و ما می توانیم از آن برای موارد زیر استفاده کنیم:

• اتوماسیون: کارهای تکراری مانند راه‌اندازی محیط توسعه، اجرای آزمایش‌ها یا استقرار کد را خودکار کنید.

• محیط: محیط پوسته خود را سفارشی کنید، مانند ایجاد نام مستعار برای دستورات پرکاربرد یا تنظیم متغیرهای محیطی برای پیکربندی ابزارهای ما.

• ساخت و استقرار: یک اسکریپت پوسته بنویسید تا فرآیند ساخت و استقرار را خودکار کند تا آن را ساده کند.

اولین اسکریپت من را بنویس

توجه: من از ویندوز Git برای ویندوز با bash استفاده می کنم، بنابراین از ترمینال bash استفاده می کنم.

ما اولین Hello World خود را در ترمینال ایجاد می کنیم، ویرایشگر متن را باز می کنیم، خطوط زیر را اضافه می کنیم و با نام ذخیره می کنیم. hello.sh:

#!/bin/bash
echo "Hello World"

در خط اول چیزی به نام the اضافه می کنیم shebang خط در این مورد، مفسر پوسته مورد استفاده را مشخص می‌کند. /bin/bash، برای اجرای اسکریپت. ابتدا باید با اجرا آن را قابل اجرا کنیم chmod +x hello.shو سپس اسکریپت را با تایپ اجرا کنید ./hello.sh.

$ ./hello.sh
Hello World

متغیرها

ما می‌توانیم یک متغیر را برای ذخیره مقادیر در اسکریپت‌های پوسته اعلام کنیم و مقادیر را بین دستورات مختلف ارسال کنیم. به عنوان مثال، ما یک متغیر را اعلام می کنیم version و مقدار “1.0” را به آن اختصاص دهید. صورتحساب echo پیام را با نسخه چاپ می کند.

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

حلقه ها

می توانیم از a استفاده کنیم for حلقه برای تکرار روی یک لیست. به عنوان مثال، ما لیستی از نام ها داریم که از for و 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 برای انجام تعویض دستور و ذخیره نتیجه یک دستور در یک متغیر استفاده می شود.

نام متغیر را تغییر دهید names به files استفاده كردن $(ls) برای دریافت لیست فایل در دایرکتوری

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

اسکریپت تبریک برای هر فایل اجرا می کند. با نمای کلی، می توانیم یک اسکریپت برای انجام چندین کار ایجاد کنیم:

• فرآیند ساخت پروژه front-end خود را خودکار کنید. برای مثال، می‌توانید از یک اسکریپت برای کامپایل کردن فایل‌های SASS، کوچک‌سازی فایل‌های جاوا اسکریپت یا کپی فایل‌ها از یک مکان به مکان دیگر استفاده کنید.

• ما می توانیم از یک اسکریپت برای آپلود کد شما در یک سرور راه دور استفاده کنیم یا یک سری آزمایش را قبل از استقرار اجرا کنیم.

• ما می توانیم از یک اسکریپت برای نصب بسته های مورد نیاز یا راه اندازی یک سرور توسعه محلی استفاده کنیم.

مشروط IF ELSE

پس از بازخورد کارلوس آگوستو، بخش IF و ELSE را اضافه کنید

ما می توانیم یک بلوک کد را در اسکریپت های پوسته bash با استفاده از آن اجرا کنیم if بیان زمانی که شرط است true، جایی که [condition] هر عبارت bash معتبری است که بتوان آن را درست یا نادرست ارزیابی کرد.

ما چند گزینه برای ارزیابی شرایط داریم مانند استفاده از 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” را خروجی می دهد زیرا نام دارای یک مقدار است.

سناریوی “داربست پروژه من”

ما می خواهیم یک اسکریپت برای تولید یک پروژه Angular با لیستی از دایرکتوری ها ایجاد کنیم و اولین تغییرات را به صورت پیش فرض انجام دهیم.

بیایید هر خط را توضیح دهیم:

• یک فایل خالی بسازید scaffold.sh با ویرایشگر شما

• یک متغیر برای ذخیره نام پروژه ایجاد کنید projectName و با استفاده از ترمینال پارامتر را بخوانید $1

• استفاده کنید if [ -z "$1" ] و exit برای متوقف کردن اسکریپت بدون پارامتر (با تشکر از کارلوس آگوستو).

• یک متغیر دیگر برای لیست دایرکتوری ها “pages components store” اعلام کنید.

• را اجرا کنید npx با angular/cli برای تولید پروژه با استفاده از $projectName متغیر.

• پروژهName و دایرکتوری src را با استفاده از آن وارد کنید cd

• چاپ “تولید دایرکتوری ها.” استفاده كردن 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"

پروژه را با عبور پارامتر مانند اجرا کنید scaffold.sh blog ، پروژه زاویه ای را با دایرکتوری پیش فرض تولید می کند و تغییرات را انجام می دهد.

این باعث صرفه جویی در زمان می شود و به شرکت کمک می کند تا همان ساختار دایرکتوری ها را برای یک دیگ بخار ایجاد کند.

این مثال نحوه استفاده از اسکریپت پوسته را برای خودکارسازی بسیاری از کارهای دیگر، مانند کدهای پرکننده، اجرای آزمایش‌ها، یا استقرار کد در یک سرور راه دور نشان می‌دهد.

کد منبع:

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

مراحل بعدی

در پایان، پوسته اسکریپت ابزار قدرتمندی است که می تواند به توسعه دهندگان فرانت اند کمک کند تا وظایف را خودکار کرده و محیط توسعه خود را سفارشی کنند. با درک اولیه از مفاهیم پوسته اسکریپت، توسعه دهندگان فرانت اند می توانند از اسکریپت های پوسته برای بهبود گردش کار خود و کارآمدتر کردن فرآیند توسعه خود استفاده کنند.

چیزهای بیشتری برای یادگیری وجود دارد، از جمله مفاهیم پیشرفته تر. می توانید منابع بیشتری را به صورت آنلاین برای ادامه سفر یادگیری خود بیابید.