Cómo crear tu primera CLI con Bash

Soy desarrollador front-end y uso muchas herramientas CLI a diario, las cuales ejecutan algunos comandos para generar proyectos o realizar tareas. Había escuchado hablar de shell scripting, pero nunca lo había probado.

En mi día a día, uso varios comandos desde la terminal, como:

cd: Cambiar el directorio de trabajo actual.
ls: Listar los archivos de un directorio.
pwd: Mostrar la ruta del directorio de trabajo actual.
touch: Crear un archivo vacío.
grep: Buscar dentro de un archivo y mostrar las líneas que contienen esa palabra.
mkdir: Crear un nuevo directorio.
rm: Eliminar un archivo o directorio.
cp: Copiar un archivo.

Decidí aprender los conceptos básicos de shell scripting y ver cómo puede ser útil para nuestras tareas de desarrollo front-end.

¿Qué es Shell Scripting?

Antes de empezar, ¿qué es shell scripting? Nos ayuda a automatizar tareas o configurar opciones en nuestro entorno de terminal. Un script de shell es un archivo de texto simple que contiene comandos para ejecutarse en secuencia, y podemos usarlo para:

Automatización: Automatizar tareas repetitivas, como preparar un entorno de desarrollo, ejecutar pruebas o desplegar código.
Entorno: Personalizar tu entorno de terminal, por ejemplo creando alias para comandos frecuentes o configurando variables de entorno para nuestras herramientas.
Compilación y despliegue: Escribir un script de shell para automatizar y simplificar el proceso de build y deploy.

Escribir mi primer script

Nota: Estoy usando Windows. Git para Windows ya incluye Bash, así que estoy usando la terminal de Bash.

Usuarios de Mac: https://www.howtogeek.com/444596/how-to-change-the-default-shell-to-bash-in-macos-catalina/
En la mayoría de distribuciones de Linux, Bash viene por defecto ;)

Vamos a crear nuestro primer "hola mundo" en la terminal. Abre tu editor de texto, agrega las siguientes líneas y guarda el archivo con el nombre hello.sh:

#!/bin/bash
echo "Hello World"

En la primera línea agregamos lo que se conoce como la línea shebang. Esta línea especifica el intérprete de shell que se va a usar para ejecutar el script, en este caso /bin/bash. Primero debemos darle permisos de ejecución corriendo chmod +x hello.sh, y luego ejecutamos el script escribiendo ./hello.sh.

$ ./hello.sh
Hello World

Variables

Podemos declarar variables para guardar valores en nuestros scripts y pasar datos entre diferentes comandos. Por ejemplo, declaramos una variable version y le asignamos el valor "1.0". La instrucción echo imprime el mensaje con la versión.

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

Bucles

Podemos usar un bucle for para iterar sobre una lista. Por ejemplo, aquí tenemos una lista de nombres usando for y do:

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

Funciones

Podemos definir funciones para encapsular lógica compleja y hacer que nuestro script sea más fácil de mantener usando la palabra clave function y pasando parámetros. Dentro de la función podemos acceder a cada argumento usando la sintaxis $n, donde n es la posición del parámetro empezando desde 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

Ejecutamos el script y vemos los resultados:

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

Leer la salida de un comando

A veces queremos capturar la salida de un comando como ls y realizar acciones con ese resultado. Para estos casos usamos $(), que en Bash permite hacer sustitución de comandos y guardar el resultado dentro de una variable.

Cambiamos el nombre de la variable names a files usando $(ls) para obtener la lista de archivos del directorio:

version="1.0"
## ejecutar el comando ls
files=$(ls)
 
function congrats {
    echo "hi, how are you $1"
}
 
for fileName in $files; do
  congrats $fileName
done

Ejecutamos el script y vemos los resultados:

$ ./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

El script ejecuta la función congrats para cada archivo. Con este panorama básico, podemos crear scripts para realizar varias tareas:

Automatizar el proceso de compilación de tu proyecto front-end. Por ejemplo, compilar archivos SASS, minificar JavaScript o copiar archivos de un lugar a otro.
Subir tu código a un servidor remoto o ejecutar una serie de pruebas antes de un despliegue.
Instalar los paquetes necesarios o iniciar un servidor de desarrollo local.

Condicionales IF ELSE

Tras el feedback de Carlos Augusto, agregué esta sección de IF y ELSE.

Podemos ejecutar un bloque de código en scripts de Bash usando la sentencia if cuando la condición es true, donde [condicion] es cualquier expresión válida de Bash que se pueda evaluar como verdadera o falsa.

Tenemos varias opciones para evaluar condiciones usando if:

Igualdad entre dos valores: if [ "$value1" = "$value2" ]; then
Desigualdad entre dos valores: if [ "$value1" != "$value2" ]; then
Si un valor es mayor o igual que otro: if [ "$value1" -ge "$value2" ]; then
Si un archivo existe: if [ -f "$filename" ]; then
Si un directorio existe: if [ -d "$dirname" ]; then
Si una cadena de texto tiene longitud cero o está vacía: if [ -z $1 ].

La condición de if va entre corchetes [ ] y va seguida de then para indicar la acción cuando el resultado es true. También podemos usar el operador ! para negar el resultado.

Ejemplo:

#!/bin/bash
# asignar valor a la variable 'name'
name="dany"
# verificar si name tiene valor
if [ -z $name ]; then
    echo "Hi $name"
else
    # name está vacío
    echo "Sorry , please set a name"
fi

En este ejemplo, el script mostrará "Hi dany" porque la variable name tiene un valor.

Caso práctico: "Generar la estructura de mi proyecto"

Queremos crear un script para generar un proyecto en Angular con una lista de directorios y hacer commit de los primeros cambios por defecto.

Expliquemos cada paso:

Crea un archivo vacío llamado scaffold.sh con tu editor.
Crea una variable para guardar el nombre del proyecto projectName y lee el parámetro desde la terminal usando $1.
Usa if [ -z "$1" ] y exit para detener el script si no se pasan parámetros (gracias a Carlos Augusto).
Declara otra variable para la lista de directorios "pages components store".
Ejecuta npx con @angular/cli para generar el proyecto usando la variable $projectName.
Entra al directorio del proyecto y a la carpeta src usando cd.
Imprime "Generate directories" usando echo.
Usa el bucle for para iterar sobre la lista de directorios.
Usa el comando mkdir para crearlos.
Al terminar, usa comandos de Git para inicializar el repositorio, agregar los archivos y confirmar los cambios.

El código final es:

#!/bin/bash
version="1.0"
# validar que el usuario pasó el parámetro
if [ -z "$1" ]
then
     echo "Please add the parameter to script ex: ./scaffold.sh blog"
    exit
fi
# obtener el parámetro con el nombre del proyecto
projectName=$1
# definir la lista de directorios a crear
listOfDirectories="pages components store"
# usar angular cli para generar el proyecto
npx -p @angular/cli ng new $projectName
cd $projectName
cd src
echo "Generate directories"
# crear la lista de directorios
for directory in $listOfDirectories; do
  mkdir $directory
done
# inicializar git y hacer commit de los cambios
git init
git add .
git commit -m "basic template"

Ejecuta el proyecto pasando el parámetro como scaffold.sh blog. Esto genera el proyecto de Angular con los directorios por defecto y hace commit de los cambios.

Esto ahorra tiempo y ayuda al equipo a crear la misma estructura de directorios como plantilla base.

Este ejemplo muestra cómo usar shell scripting para automatizar muchas otras tareas, como revisar el código con linters, ejecutar pruebas o desplegar código a un servidor remoto.

Código fuente:

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

Próximos pasos

En conclusión, shell scripting es una herramienta muy práctica que nos ayuda a los desarrolladores front-end a automatizar tareas y personalizar nuestro entorno de desarrollo. Con un entendimiento básico de estos conceptos, podemos usar scripts de shell para mejorar nuestro flujo de trabajo y hacer nuestro proceso de desarrollo más eficiente.

Todavía hay mucho más por aprender, incluyendo conceptos más avanzados. Puedes encontrar muchos más recursos en línea para continuar tu camino de aprendizaje.