Сборка для HTML-курсов в HTML Academy

Начало

Установка

Структура папок

├── .github/                    # Специальная папка для github
│   └── workflows/              # Автоматизация для github actions
│       ├── check.yml           # Запускает линтеры на Гитхабе
│       └── gh-pages.yml        # Публикует проект и создаёт ссылку на проект
├── raw/                        # Папка для «сырых» файлов (игнорируются гитом)
│   ├── icons/                  # Папка для оригиналов svg-иконок
│   └── images/                 # Папка для оригиналов картинок
├── source/                     # Исходники проекта
│   ├── favicons/               # Папка для фавиконок (кроме favicon.ico)
│   ├── fonts/                  # Папка для шрифтов
│   ├── icons/                  # Папка для оптимизированных svg-иконок для преобразования их в спрайт (stack)
│   ├── images/                 # Папка для оптимизированных картинок
│   ├── scripts/                # Скрипты
│   │   └── index.js            # Главный скрипт
│   ├── styles/                 # Папка для препроцессорных файлов sass
│   │   ├── blocks/             # Стили БЭМ-блоков
│   │   │   └── header.scss     # Стили для конкретного БЭМ-блока
│   │   ├── common/             # Папка для общих стилей (не БЭМ-блоки)
│   │   │   ├── fonts.scss      # Подключение шрифтов к проекту
│   │   │   ├── global.scss     # Глобальные стили, которые касаются всего проекта
│   │   │   └── variables.scss  # Переменные для всего проекта
│   │   └── styles.scss         # Основной стилевой файл с импортами всех остальных
│   ├── vendor                  # Папка для сторонних бибилотек
│   └── index.html              # HTML-файл для главной страницы
├── .editorconfig               # Настройки форматирования текстовых файлов
├── .eslintrc                   # Правила для eslint
├── .gitignore                  # Настройки игнорирования файлов для git
├── .linthtmlrc                 # Правила для linthtml
├── .stylelintrc                # Правила для stylelint
├── gulpfile.js                 # Автоматизация для Gulp
├── package.json                # Зависимости проекта, скрипты, настройки проекта
├── package-lock.json           # Зависимости проекта
└── README.md                   # Документация

Основные команды

Дополнительные команды

Работа с разметкой

└── source/
    ├──  index.html
    ├──  catalog.html
    └──  form.html

└── build/
    ├──  index.html
    ├──  catalog.html
    └──  form.html

Работа со стилями

└── source/
    └── styles/
        ├── blocks/
        │   └── header.scss
        ├── common/
        │   ├── fonts.scss
        │   ├── global.scss
        │   └── variables.scss
        └── styles.scss

/* COMMON */
@import "./common/variables.scss";
@import "./common/global.scss";
@import "./common/fonts.scss";

/* BLOCKS */
@import "./blocks/header.scss";

└── build/
    └── styles/
        └── styles.css

Работа с графикой

Растр

Вектор

└── raw/
    └── icons/

└── raw/
    └── images/

└── source/
    ├── icons/
    └── images/

Сборка

└── build/
    ├── icons/                  # при любой сборке
    │   └── stack.svg
    └── images/                 # только при продакшен-сборке
        ├── hero@1x.png
        ├── hero@1x.webp
        ├── hero@2x.png
        ├── hero@2x.webp
        └── logo.svg

Фавиконки

└── source/
    ├── favicons/
    │   ├── 180.png
    │   ├── 192.png
    │   ├── 512.png
    │   └── icon.svg
    ├── favicon.ico
    └── manifest.webmanifest

Работа со шрифтами

└── build/
    └── fonts/
        ├──  open-sans.woff2
        └──  open-sans-bold.woff2

Работа со скриптами

└── source/
    └── scripts/
        ├── index.js
        └── modal.js

└── build/
    └── scripts/
        ├── index.js
        └── modal.js

Работа со сторонними библиотеками

└── source/
    └── vendor/
        ├── library.css
        └── library.js

└── source/
    └── vendor/
        └── library/
            ├── library.css
            └── library.js

└── build/
    └── vendor/
        └── library/
            ├── library.css
            └── library.js