Frontend / Markup Template

Подразумевается использование в связке с Visual Code

Используется автосборщик Gulp

Пайплайн автосборки:

• Создание и оптимизация атласа спрайтов
• Генерация CSS классов для работы с атласом
• Создание, конкатенация и оптимизация CSS из SASS
• Конкатенация и минификация сторонних библиотек
• Транспайлинг, конкатенация и минификация ES6 JS кода
• Копирование шрифтов
• Копирование и оптимизация изображений
• Копирование остальных ассетов
• Генерация HTML
• Запуск отслеживание изменений
• Запуск сервера для просмотра сайта в браузере

Результат попадает в папку production.

Что / Где / Когда

За что отвечают те или иные папки

• Спрайты добавляются в папку assets/sprites
• Изображения в папку assets/imgs
• Остальное в корень папки assets
• Шрифты в папку assets/fonts
• В папке es6 находится файл app.js, из него можно загружать модули, которые создаются в той же папке, а также использовать нововведения ECMAScript6
• В папке pug файлы шаблонизатора Pug (Jade), в корне создаются страницы, а в папке includes лежат основные блоки header, footer...
• В папке scss есть множество папок, app.css является входным / основным файлом для стилей. В папке custom файлы для добавления цветов, стилей и общий файл для типографики
• bower.json содержит список сторонних библиотек, таких как jquery, magnific-popup

Развертывание проекта:

Gulp должен быть установлен глобально

npm i -g gulp

Устанавливаем все необходимые модули

npm i

Устанавливаем сторонние библиотеки (при необходимости устанавливаем bower "npm i -g bower")

bower i

В Visual Code нажимаем

Ctrl + Shift + B

Завершить задачу

F1 -> Завершить запущенную задачу

Принудительно актуализировать папку production

gulp update