Создание HTML-проекта с использованием Bash

Mar 18, 2018

Работа над новым HTML-проектом начинается с создания структуры директорий и стандартного набора файлов со стандартным содержанием. Клонирование Git-репозитория или установка пакета с использованием менеджера пакетов - путь современного веб-разработчика, автоматизирующего начало работы над проектом. Этот путь быстр, удобен, но требует специального программного обеспечения и доступа к сети интернет. Альтернативное решение - собственный скрипт, для выполнения которого требуется только командная оболочка.

Приведу пример Bash скрипта, автоматизирующего создание структуры и содержания простого HTML-проекта в заданной директории.

Скрипт принимает один необязательный параметр, задающий корневую директорию создаваемого проекта. Если параметр не задан, используется текущая директория. В результе выполнения скрипта будет создан HTML-проект, состоящий из:

трёх стандартных для HTML-проекта директорий: css, img, js;
корневого индексного файла index.html, содержащего базовую HTML разметку;
подключаемого файла каскадной таблицы стилей css/style.css;
подключаемого файла JavaScript js/script.js.

#!/bin/bash

FOLDER=${1:-$(pwd)}

mkdir -p "$FOLDER/"{css,js,img}

cat <<HTML > "$FOLDER/index.html"
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
    <meta name="author" content="">
    <title>Новая страница</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
  </head>
  <body>
    <h1>Новая страница</h1>
    <p>Время создания: <time datetime="$(date +'%FT%R')">$(date +'%F %T')</time></p>
  </body>
</html>
HTML

cat <<CSS > "$FOLDER/css/style.css"
@charset "utf-8";
html {
  box-sizing: border-box;
}
*, :before, :after {
  box-sizing: inherit;
}
body {
  background: blue;
  color: white;
}
CSS

cat <<JS > "$FOLDER/js/script.js"
document.addEventListener('DOMContentLoaded', function() {
  console.log('Документ загружен');
}, false);
JS

Одна команда в консоли и будет получен скелет готового к дальнейшей работе HTML-проекта.

./create-html-project.sh /home/dmitry/www/my-html-project

Использование собственных Bash скриптов - решение, способное упростить работу веб-разработчика. При этом, это решение универсально, так как Bash работает в современных операционных системах для рабочих станций: Microsoft Windows, Apple MacOS и многочисленных операционных системах на основе ядра Linux. А зная принципы написания Bash скриптов и функциональные возможности доступных утилит, можно гибко управлять результатом, с легкостью автоматизируя рутинные задачи веб-разработки, полагаясь исключительно на встроенные инструменты.