Этот шаблон предназначен для автоматизации рутинных задач в процессе вёрстки. Он не подойдёт для разработки приложений на ReactJS или другом «модном фреймворке» 🤕, но отлично потянет вёрстку с JavaScript функционалом.
- Скачать и установить Node.js. Если уже стоит, то проверьте версию на всякий случай
- Склонировать этот проект и удалить
.git
, чтобы привязать свой репозиторий - Установить зависимости
npm i
- Компиляция pug шаблонов
- Компиляция stylus
- Сборка svg-спрайта
- Добавление вендорных префиксов к свойствам
- Минификация css с помощью csso
- ES6
- Конкатенация и минификация js
- Оптимизация картинок
- Автоматическое обновление страницы в браузере
- Валидация html на w3c
- Слежение за изменениями файлов
- Генерация файлов страниц и блоков
src
- исходные файлы проектаdist
- результат компиляции
assets
styles
- глобальные стили проектаimages
- картинки проектаsvg
- svg-иконки для спрайта
scripts
- глобальные скрипты для проекта
templates
blocks
- независимые блоки, из которых собираются страницыlayouts
- шаблоны лейаутов, который наследуют страницыpages
- шаблоны страниц
В gulpfile.js
описаны таски, которые выполняют те или иные действия. Таски можно вызывать по отдельности и группами. В проекте настроен вызов групповых тасков через npm. Для вызова индивидуального таска достаточно набрать gulp
+ название таска
Кажется, что это мелочь, но на самом деле на создание новых файлов для блоков (особенно блоков) и страниц уходит туча времени. Поэтому этот процесс автоматизирован. Всего одна команда npm run add
позволит создать:
- файл новой страницы
- папку нового компонента с шаблоном компонента, файлом стилей и файлом js
npm start
- компиляция файлов + запуск сервера для разработки с отслеживанием измененийnpm run prod
- компиляция файлов для передачи клиенту и создание архива с скомпилированными файламиnpm run validate
- валидация html
Глобальные стили для всего проекта хранятся в файле settings.styl
, полезные миксины - в файле mixins.styl
, переменные - в файле variables.styl
. Стили для блоков хранятся в папке блока. Например, templates/blocks/header/header.styl
. Файл main.styl
является главным стилевым файлом, в котором подключаются все остальные файлы, в том числе файлы блоков. В нём ничего писать не надо. Если бы мы использовали scss, или sass, то вам бы пришлось писать инклюд для каждого созданного вами css файла блока. Но мы используем stylus, и можем подключить все файлы блоков одной строчкой. Круто? Поэтому мы и используем stylus.
Для упрощения написания медиазапросов к проекту подключен плагин rupture
, который позволяет писать вот так:
.test
color: red
+below(700px)
color: blue
Если вы жить не можете без сеток, то и тут есть помощник: lost
. Очень мощная штука.
Для каждого блока создаётся своя папка в каталоге templates/blocks
. Название папки соответствует названию блока. Например, блок header
: его родина - папка header
, в которой лежат header.pug
и header.styl
. Если бы для этого блока был необходим js, то он бы лежал здесь же и назывался бы... header.js
.
Разметка блока оформляется как jade миксин, который потом просто подключается на странице.
В качестве html-шаблонизатора в проекте используется pug
. Почему? В двух словах:
- Синтаксис очень похож на тот, что используется в CSS
- Система отступов: благодаря им обеспечивается правильный каскад
- Переменные
- Миксины
- Includes
- Читаемость (сперва будет непривычно, но спустя время – это будет казаться очень даже удобным)
- Большое количество учебных материалов
Для еще большего ускорения верстки в проекте подключены миксины
bemto
, существенно облегчающие использование методологии БЭМ. Попробуйте - вам понравится.
В шаблоне подключен Babel, так что смело можно использовать все прелести ES6:
const
иlet
- Template literals
- Стрелочные функции
- Промисы
- Новые функции работы с массивами и т.д.