Cómo embellecer archivos HTML (a granel) en Mac

Si es un desarrollador o diseñador web, es posible que trabaje con una gran cantidad de archivos HTML. Si bien estos archivos pueden contener contenido valioso, a veces pueden ser difíciles de leer o editar debido a problemas de formato. Embellecer sus archivos HTML, o darles el formato correcto, les permite leer, modificar y depurar más fácilmente. Sin embargo, embellecer manualmente una gran cantidad de archivos HTML puede ser una tarea que requiere mucho tiempo.

Afortunadamente, con un poco de conocimiento de secuencias de comandos, puede automatizar el proceso de embellecer los archivos HTML utilizando una secuencia de comandos Bash en su Mac. En este artículo, lo guiaremos a través del proceso de creación de un script Bash que le permitirá embellecer sus archivos HTML por lotes.

Al final de este tutorial, tendrá un script Bash completamente funcional que puede usar para embellecer rápida y fácilmente varios archivos HTML a la vez, ahorrándole tiempo y esfuerzo.

Así es como se ve un archivo HTML sin formato o desordenado:

<!DOCTYPE html><html><head><title>Example Website</title>
<link rel="stylesheet" href="https://www.hongkiat.com/blog/beautify-htmls-bulk-mac/style.css"></head><body>
<div class="header"><h1>Welcome to our Website</h1><nav><ul><li>
<a href="index.html">Home</a></li><li><a href="about.html">About Us</a></li><li><a href="contact.html">Contact Us</a></li></ul></nav></div><div class="content"><h2>About Us</h2> 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ultrices mauris. Sed finibus mauris et tortor malesuada, at elementum nunc lacinia. Donec euismod elit nec arcu vulputate eleifend. Duis euismod mauris at nisl consequat, sit amet pretium dolor luctus. Etiam lobortis, ex vitae consectetur congue, magna odio dignissim ante, eu tristique sapien turpis id odio. Nam dignissim tellus et ligula dignissim, a sollicitudin magna posuere. Nulla facilisi. Donec et metus volutpat, feugiat quam non, dictum libero. Curabitur auctor, libero sit amet interdum facilisis, ante sapien eleifend turpis, at congue ex mi id velit.</p></div>
<div class="footer"><p>© 2023 Example Website</p></div></body></html>

Y así es como se vería después de haber sido formateado:

<!DOCTYPE html>
<html>
<head>
  <meta name="generator" content="HTML Tidy for HTML5 for Apple macOS version 5.8.0">
  <title>Example Website</title>
  <link rel="stylesheet" href="https://www.hongkiat.com/blog/beautify-htmls-bulk-mac/style.css">
</head>
<body>
  <div class="header">
    <h1>Welcome to our Website</h1>
    <nav>
      <ul>
        <li>
          <a href="index.html">Home</a>
        </li>
        <li>
          <a href="about.html">About Us</a>
        </li>
        <li>
          <a href="contact.html">Contact Us</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="content">
    <h2>About Us</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ultrices mauris. Sed finibus mauris et tortor malesuada, at elementum nunc lacinia. Donec euismod elit nec arcu vulputate eleifend. Duis euismod mauris at nisl consequat, sit amet pretium dolor luctus. Etiam lobortis, ex vitae consectetur congue, magna odio dignissim ante, eu tristique sapien turpis id odio. Nam dignissim tellus et ligula dignissim, a sollicitudin magna posuere. Nulla facilisi. Donec et metus volutpat, feugiat quam non, dictum libero. Curabitur auctor, libero sit amet interdum facilisis, ante sapien eleifend turpis, at congue ex mi id velit.</p>
  </div>
  <div class="footer">
    <p>ÃÂ© 2023 Example Website</p>
  </div>
</body>
</html>

El siguiente es el script bash que necesitará.

#!/bin/bash

# Check if `tidy` command-line tool is installed
if ! command -v tidy &> /dev/null
then
    echo "Error: tidy is not installed. Please install tidy using 'brew install tidy' command." >&2
    exit 1
fi

# Check if input folder argument is provided
if [ $# -eq 0 ]
then
    echo "Error: No input folder provided. Please provide an input folder as an argument." >&2
    exit 1
fi

# Check if input folder exists
if [ ! -d "$1" ]
then
    echo "Error: Folder '$1' does not exist." >&2
    exit 1
fi

# Loop through HTML files in the input folder and beautify them
find "$1" -type f -name "*.html" -print0 | while read -d $'' file
do
    # Beautify HTML code and replace the original file
    tidy -indent -wrap 0 -quiet -m -i "$file"
done

# Exit with success status
exit 0

Descargar beautify_html.sh

Qué hace el script Bash

Esta secuencia de comandos está escrita en el lenguaje de secuencias de comandos Bash y automatiza el proceso de embellecer los archivos HTML a granel en una Mac.

El script comprueba si la herramienta de línea de comandos 'ordenada' está instalada y si se proporciona un argumento de carpeta de entrada. Si la carpeta de entrada existe, la secuencia de comandos recorre todos los archivos HTML en la carpeta de entrada y los embellece con la herramienta de línea de comandos 'ordenada'. Los archivos HTML originales se reemplazan con las versiones mejoradas.

Si 'tidy' no está instalado o la carpeta de entrada no existe, el script generará un mensaje de error y saldrá con un estado de error. Si todo se ejecuta correctamente, el script finaliza con un estado de éxito.

Cómo usar este script

Aquí hay una guía fácil de seguir para usar el script para embellecer un solo archivo HTML o varios archivos a granel.

Abra un editor de texto en su Mac, como TextEdit o Sublime Text.
Copie y pegue el script en un archivo nuevo.
Guarde el archivo con un nombre, como "embellecer_html.sh“, y asegúrese de que la extensión del archivo sea “.sh“.
Abra la aplicación Terminal en su Mac.
Navegue hasta el directorio donde se guarda el archivo de script con el comando "cd".
Tipo chmod +x beautify_html.sh y presiona Ingresar para hacer que el script sea ejecutable.
Tipo ./beautify_html.sh /path/to/input/folder y presione Entrar para ejecutar el script, reemplazando /path/to/input/folder con la ruta real a la carpeta que contiene sus archivos HTML.
Espere a que el script termine de ejecutarse. Recorrerá todos los archivos HTML en la carpeta de entrada y los embellecerá con la herramienta de línea de comandos 'ordenada'.
Una vez que el script haya terminado de ejecutarse, sus archivos HTML deben embellecerse y guardarse como los archivos originales.

Deja una respuesta Cancelar la respuesta