Если в проекте будет задача сделать critical css то для начала нужно установать модуль. Я не стал вносить его в devDependencies. Ибо он качает Chromium который весит 80mb и если его ставить как зависимость в каждый проект то это будет беда.
yarn add critical
yarn dev || gulp dev
yarn build || gulp build
yarn prod || gulp build-prod
В основном работа проходит в 2-х местах:
- Файлик config/config.json
- Папка app
Файлик служит для настройки проекта:
- Пути до файлов
- Сжатие css
- Сжатие js
- Сжатие картинок
{
"appName": "APP_NAME",
"siteName": "Site name",
"tmpPath": ".tmp",
"sourcePath": "app",
"destPath": "dist",
"dbPath": "db",
"hbsPath": "templates",
"staticPath": "static",
"stylesPath": "static/css",
"scriptsPath": "static/js",
"imagesPath": "static/images",
"pngPath": "static/png",
"fontsPath": "static/fonts",
"svgPath": "static/svg/sprite",
"svgInlinePath": "static/svg/inline",
"contentPath": "content",
"metaPath": ".meta",
"dynamicEntry": true,
"jsMin": false,
"cssMin": true,
"imageMin": true,
"criticalCss": false,
"babel": false
}
Собственно большая часть разработки проходит тут. Папка состоит из 4 основных разделов:
- meta - папка для загрузки скриншотов, которые вдальнейшем будут отображаться в index.html. index.html генерируется сам, исходя из скриншотов в папке.
- content - папка для контентной части сайта, тот котнтент который будет заливаться из админки (картинки, иконки, видео и т.п.)
- static - папка для работы, заглянув в нее сразу станет понятно. Подробнее что в ней и куда распишу далее.
- templates - папка для работы с html. Мы используем препроцессор handlebars (hbs). Собственно далее тоже распишу что к чему.
├── .meta
└── db
├── content
├── static
└── templates
В папке лежет скрины каждой страницы в формате 00_ui-toolkit. Скрин обезятельно должен начинаться с номера, далее после номере идет нижнее подчеркивание _ и только потом название скрина, которое в свою очеред должно соответсвовать названию странцы из папки templates.
Например:
├── .meta
├── 00_ui-toolkit.png
└── 01_home.png
└── templates
├── home.hbs
└── ui-toolkit.hbs
В папке лежит контентные файлы сайта, те которые в дальнейшем будут заливаться из админки. Изначально в content лежит 2 папки:
- icons - хранит иконки сайта.
- images - хранит картинки сайта.
Папки разделены потому что, при build и соответсвующих флагов в config.json будет сжатие кратинок.
Основная папка для разработки проекта. Все чудеса будут твориться тут. Структура папки. Далее про каждую папку подробнее.
└── static
├── css
├── fonts
├── images
├── js
├── png
└── svg
Как видно из структуры каждая папка говорит сама за себя. Единственное что может быть не понятно, это папки png и images.
- png - сюда складываем иконки которые в дальнейшем будут генериться в sprite.png их можно будет подключать соответсвующим mixin spritePng.
- images - сюда складываем картинки которые будем вешать на беграундах и т.п. Не иконки!
├── static
├── css
├── _common.scss
├── _imports.scss
├── _typography.scss
├── blocks
│ └── btn-list.scss
├── components
│ ├── checkbox.scss
│ ├── dropdown.scss
│ ├── loader.scss
│ └── radio.scss
├── config
│ ├── fonts.scss
│ ├── options.scss
│ └── variables.scss
├── layout
│ ├── breadcrumbs.scss
│ ├── footer.scss
│ ├── header.scss
│ ├── popup.scss
│ └── wrapper.scss
├── libs
│ ├── grid.scss
│ ├── nomolize.scss
│ └── slick.scss
├── main.scss
├── mixins
│ └── mixins.scss
├── pages
│ ├── home.scss
│ └── ui-toolkit.scss
├── png
│ ├── _mixins.scss
│ └── png-sprite.scss
├── svg
│ ├── _mixins.scss
│ ├── _sprite.scss
│ ├── _spriteInline.scss
│ └── svg.scss
└── ui
├── buttons.scss
└── form.scss
Пойдем по порядку. Постараюсь описать что происходит в каждом файле. Тут есть даже файлы которые никтогда не трогают)
- _сommon.scss - общие стили сайта. Обнуление тех или иных тегов, написане глобальных классов и т.п.
- _typography.scss - общие стили для типографики сайта.
- _imports.scss - сюда вы почти не заглядываете, если только иногда надо отключить grid system, то просто комментим строку с ее подключением.
- main.scss - тут идет подключение всех файлов. Импортировать желательно группами (Блоки, Компоненты, Страницы, и т.д.)
- blocks - тут для каждого блока создается файл *.scss. И в нем идет описание блока.
- components - сюда складываем компоненты.
- config - css настроки (переменные, опции, шрифты).
- layout - layout страниц.
- mixins - понятно из названия. Каждый миксин описывать нет смысла. Можно открыть и поглядеть что там есть.
- png & svg - в этим папки мы не лезем, так как они все делают автоматом. Можно только посмотреть что делают их mixins.
- pages - сюда складываем стили для определенных странци типа (404, static, и т.п.)
В папку складываем шрифты. Каждое семейсво шрифтов это отдельныя папка. Пример будет ниже. Суть в том что, наприме вы хотите подключить шрифт Roboto. И вам нужны будет несколько типов этого шрифта (bold, regular, medium). Допустим дизайнер вам передал только файлы формата *.ttf. Тогда, мы заходим на сайт для генерации шрифтов. Нам нужны 2 формата шрифтов (woff, woff2). Далее складываем в папку с семейством шрифта.
├── fonts
└── Roboto
├── Bold.woff
├── Bold.woff2
├── Light.woff
├── Light.woff2
├── Medium.woff
├── Medium.woff2
├── Regular.woff
└── Regular.woff2
Тепер нужно их подключить. Для этого есть готовый миксин. Подключение происходит в css/config/fonts.scss
@include font("Roboto", "Regular", 400);Далее для того чтобы использовать этот шрифт достаточно написать в нужном месте @include light;
├── js
├── modules
│ ├── helpers
│ ├── widgets
│ ├── layout.js
│ ├── preloader.js
│ ├── scroll-control.js
│ └── ui.js
├── libs.js
├── main.js
└── poly.js
Из структуры видно что к чему:
- ui.js - тут пишем js для всего сайта.
- helpers - наши компоненты. Каждый файлик описывать лень) Можно будет спросить непосредсвтвенно перед началом работы.
- libs - стороние либы, можно сюда докидывать если понадобиться что то еще.
Так же, если во время разработки нажно будет написать как либо виджет, то в папке js создается еще одна папка js/widgets. В которую потом добавляется файл с вашим виджетом.
└── svg
├── inline
└── sprite
- inline - svg, которые будут подключаться непосредственно в html. В templates/partials/ui/svg.hbs уже лежит готовый способ для их подключения.
- sprite - svg, которые будут подключаться из css. Для этого есть mixin sprite('icon-btn').
Про работу handlebars можно почитать на оф.сайте. Так же загялнуть сюда.
└── templates
├── ajax
├── home.hbs
├── layouts
├── partials
└── ui-toolkit.hbs
В корень папки складываются страницы сайта.
- ajax - в основном служит для того чтобы подтягивать какой либо контент html.
- layouts - папка для плагина. Ее не трогаеем и не удаляем.
- partials - папка где творятся чудеса)
├── partials
├── blocks
│ ├── ui-section-end.hbs
│ └── ui-section-start.hbs
├── layout
│ ├── bottom.hbs
│ ├── footer.hbs
│ ├── head.hbs
│ └── header.hbs
├── popups
│ └── example.hbs
├── svg
└── ui
├── checkbox.hbs
├── input.hbs
├── radio.hbs
└── svg.hbs
- blocks - складываем блоки сайта, если они много раз переиспользуются.
- layout - layout сайта (header, footer и т.п.).
- popups - сюда складываем попапы.
- ui - тут лежат ui элементы сайта.
В директории app/db/ есть файл “links.json”, в него записываются объекты, которые соответствуют ссылке и SEO-информации по каждой странице.
-
Если ссылка на внутренние страницы, и необходимо добавить переменную в верстку, это будет выглядеть так:
{{links.services.url}} -
Если значение передаётся в переменную из шаблона, фигурные скобки не нужны. Выглядит это так:
href=links.services.url -
Если ссылка внешняя, создаёте объект и указываете нужному ключу необходимое значение.
Основная идея заключалась в более гибком подходе к красивой перелиновке сайта.
- Home - или главная страница, теперь переносится в корень проекта и именуется index.html
- Все файлы страниц с расширением
.hbsбудут преобразованы в одноименные директотрии с html файлом. Пример:services.hbsбудет преобразовано в директориюservices/index.html - Если в имени файла сожержится двойной дефис
--, будет создана директория, состоящая из имени, которое было указано до дефиса и подпапки с именем после. Пример:services--services-1.hbsбудет преобразовано в директориюservices/services-1/index.html. - В разработке: вложенность может быть абсолютно любой.
Вот наглядный пример директорий из реального проекта:
├── index.html
├── services
└──index.html
│ ├── services-1
└──index.html
│ └── services-2
└──index.html
├── showcases
└──index.html
│ ├── showcases-1
└──index.html
│ ├── showcases-2
└──index.html
│ ├── showcases-3
└──index.html
│ └── showcases-4
└──index.html
├── insights
└──index.html
├── insights-1
└──index.html
│ └── insights-2
└──index.html
├── about
└──index.html
└── 404
└──index.html