Commit 4fd3ac51 authored by Nikolay Gromov's avatar Nikolay Gromov

Описание: незначительные правки

parent 9024d0a8
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
## Парадигма ## Парадигма
- Именование классов по БЭМ, разметка в [pug](https://pugjs.org/) и стилизация [Sass](http://sass-lang.com/). См. [Как работать с CSS-препроцессорами и БЭМ](http://nicothin.github.io/idiomatic-pre-CSS/) - Именование классов по БЭМ, разметка в [pug](https://pugjs.org/), стилизация [Sass](http://sass-lang.com/). См. [как работать с CSS-препроцессорами и БЭМ](http://nicothin.github.io/idiomatic-pre-CSS/)
- Каждый БЭМ-блок в своей папке внутри `src/blocks/`. - Каждый БЭМ-блок в своей папке внутри `src/blocks/`.
- Список использованных в проекте доп. файлов указан в `config.js`. - Список использованных в проекте доп. файлов в `config.js`.
- Есть глобальные файлы: стилевые (стили печати), js (по умолчанию пуст), шрифты, картинки. - Есть глобальные файлы: стилевые (стили печати), js (по умолчанию пуст), шрифты, картинки.
- Список pug-примесей `src/pug/mixins.pug` генерируется автоматически, содержит `include` всех существующих pug-файлов блоков. - Список pug-примесей `src/pug/mixins.pug` генерируется автоматически, содержит `include` существующих pug-файлов всех блоков.
- Диспетчер подключения стилей `src/scss/style.scss` генерируется автоматически. - Диспетчер подключения стилей `src/scss/style.scss` генерируется автоматически, содержит импорты стилевых файлов использованных в разметке блоков и импорты доп. файлов.
- Входная точка обработки js (`src/js/entry.js`) генерируется автоматически. - Входная точка обработки js (`src/js/entry.js`) генерируется автоматически, содержит `require` js-файлов использованных в разметке блоков и доп. файлов.
- Перед созданием коммита запускается проверка файлов, входящих в коммит. При наличии ошибок коммит не происходит, ошибки выводятся в терминал. - Перед созданием коммита запускается проверка индексированных файлов. При ошибках коммит не происходит, ошибки выводятся в терминал.
- Есть механизм быстрого создания нового блока: `node createBlock.js new-block` (создаёт папки и scss-файл). После имени нового блока можно дописать нужные расширения. - Есть механизм быстрого создания нового блока: `node createBlock.js new-block` (создаёт папки и scss-файл). После имени нового блока можно дописать нужные расширения.
...@@ -18,8 +18,12 @@ ...@@ -18,8 +18,12 @@
`npm start` — запуск сервера разработки (сборка **без библиотеки блоков**). `npm start` — запуск сервера разработки (сборка **без библиотеки блоков**).
`npm run build` — сборка **без библиотеки блоков** и без запуска сервера разработки.
`npm run wlib` — запуск сервера разработки (сборка проекта с библиотекой блоков). `npm run wlib` — запуск сервера разработки (сборка проекта с библиотекой блоков).
`npm run test` — проверка всех pug-, scss- и js-файлов на соответствие правилам (см. `.pug-lintrc`, `.stylelintrc` и `eslintrc` соответственно).
`npm run deploy` — cборка проекта (с библиотекой) и отправка содержимого папки сборки на gh-pages (не сработает, если проект не имеет репозитория на github.com). `npm run deploy` — cборка проекта (с библиотекой) и отправка содержимого папки сборки на gh-pages (не сработает, если проект не имеет репозитория на github.com).
...@@ -62,17 +66,17 @@ npm start ...@@ -62,17 +66,17 @@ npm start
1. Очищается папка сборки (`build/`). 1. Очищается папка сборки (`build/`).
5. Записывается файл `src/pug/mixins.pug` со всеми pug-файлами блоков. 5. Записывается файл `src/pug/mixins.pug` со всеми pug-файлами блоков.
5. Компилируются файлы страниц (`src/pages/**/*.pug`). 5. Компилируются файлы страниц (`src/pages/**/*.pug`).
5. Из скомпилированных html-файлов извлекаются все классы уровня БЭМ-блока. На основании этого списка будут построены диспетчер подключения стилей и список всех js-файлов проекта. 5. Из скомпилированных html-файлов извлекаются все классы уровня БЭМ-блока. На основании этого списка будут построены диспетчер подключения стилей и список всех js-файлов проекта.
5. Генерируются спрайты, в папку сборки копируются картинки блоков и доп. файлы из секции `addAssets` файла `config.js`. 5. Генерируются спрайты (если используются), в папку сборки копируются картинки блоков и доп. файлы из секции `addAssets` файла `config.js`.
5. Записывается диспетчер подключения стилей `src/scss/style.scss`, в котором: 5. Записывается диспетчер подключения стилей `src/scss/style.scss`, в котором:
- Импорты файлов из секции `addStyleBefore` файла `config.js`. По умолчанию — SCSS-переменные и примеси. - Импорты файлов из секции `addStyleBefore` файла `config.js`. По умолчанию — SCSS-переменные и примеси.
- Импорты файлов БЭМ-блоков, использующихся на проекте. - Импорты файлов БЭМ-блоков, использующихся в разметке.
- Импорты файлов БЭМ-блоков, упомянутых в секции `alwaysAddBlocks` файла `config.js`. Таким образом, можно взять в сборку любой блок, даже если его css-класс не упоминается в разметке страниц. - Импорты файлов БЭМ-блоков, упомянутых в секции `alwaysAddBlocks` файла `config.js`. Таким образом, можно взять в сборку любой блок, даже если его css-класс не упоминается в разметке страниц.
- Импорты файлов из секции `addStyleAfter` файла `config.js`. По умолчанию — стили для печати страницы. - Импорты файлов из секции `addStyleAfter` файла `config.js`.
5. Записывается диспетчер подключений скриптов `src/js/entry.js`, в котором: 5. Записывается диспетчер подключений скриптов `src/js/entry.js`, в котором:
- `require` файлов из секции `addJsBefore` файла `config.js`. - `require` файлов из секции `addJsBefore` файла `config.js`.
- `require` файлов БЭМ-блоков, использующихся на проекте. - `require` файлов БЭМ-блоков, использующихся в разметке.
- `require` файлов БЭМ-блоков, упомянутых в секции `alwaysAddBlocks` файла `config.js`. - `require` файлов БЭМ-блоков, упомянутых в секции `alwaysAddBlocks` файла `config.js`.
- `require` файлов из секции `addJsAfter` файла `config.js`. - `require` файлов из секции `addJsAfter` файла `config.js`.
5. Компилируются и обрабатываются PostCSS-ом стили (`src/scss/style.scss`). 5. Компилируются и обрабатываются PostCSS-ом стили (`src/scss/style.scss`).
6. Javascript (`src/js/entry.js`) собирается webpack-ом. 6. Javascript (`src/js/entry.js`) собирается webpack-ом.
...@@ -104,23 +108,23 @@ node createBlock.js demo-block # создаст папку блока, de ...@@ -104,23 +108,23 @@ node createBlock.js demo-block # создаст папку блока, de
node createBlock.js demo-block pug js # создаст папку блока, demo-block.scss, demo-block.pug, demo-block.js, подпапки img/ и bg-img/ для этого блока node createBlock.js demo-block pug js # создаст папку блока, demo-block.scss, demo-block.pug, demo-block.js, подпапки img/ и bg-img/ для этого блока
``` ```
Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют. Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.
## Разметка ## Разметка
Используется [pug](https://pugjs.org/api/getting-started.html). Используется [pug](https://pugjs.org/api/getting-started.html).
Все страницы (см. `src/pages/index.pug`) являются расширениями шаблонов из `src/pug` (см. [наследование шаблонов](https://pugjs.org/language/inheritance.html)), в страницах описывается только содержимое «шапки», «подвала» и контентной области (см. [блоки](https://pugjs.org/language/inheritance.html#block-append-prepend)). Все страницы (см. `src/pages/index.pug`) являются расширениями шаблонов из `src/pug` (см. [наследование шаблонов](https://pugjs.org/language/inheritance.html)), в страницах описывается только содержимое «шапки», «подвала» и контентной области (см. [блоки](https://pugjs.org/language/inheritance.html#block-append-prepend)).
Каждый блок (в `src/blocks/`) может содержать одноимённый pug-файл с одноименной примесью, который при старте сервера разработки будет взят includ-ом в файл `src/pug/mixins.pug`. Каждый блок (в `src/blocks/`) может содержать одноимённый pug-файл с одноименной примесью, который при старте сервера разработки будет взят includ-ом в файл `src/pug/mixins.pug`.
## Стили ## Стили
Диспетчер подключений (`src/scss/style.scss`) формируется автоматически при старте сервера разработки. Диспетчер подключений (`src/scss/style.scss`) формируется автоматически при старте сервера разработки.
Каждый блок (в `src/blocks/`) может содержать одноимённый scss-файл со стилями этого блока. Если блок используется в разметке (или упомянут в `config.js#alwaysAddBlocks`), его scss-файл будет взят в сборку стилей. Каждый блок (в `src/blocks/`) может содержать одноимённый scss-файл со стилями этого блока. Если блок используется в разметке (или упомянут в `config.js#alwaysAddBlocks`), его scss-файл будет взят в сборку стилей.
Используемый постпроцессинг: Используемый постпроцессинг:
...@@ -137,7 +141,7 @@ node createBlock.js demo-block pug js # создаст папку блока, de ...@@ -137,7 +141,7 @@ node createBlock.js demo-block pug js # создаст папку блока, de
Для глобальных действий предусмотрен `src/js/script.js` (см. `config.js#addJsAfter` и `config.js#addJsBefore`). Для глобальных действий предусмотрен `src/js/script.js` (см. `config.js#addJsAfter` и `config.js#addJsBefore`).
Каждый блок (в `src/blocks/`) может содержать одноимённый js-файл. Если блок используется в разметке (или упомянут в `config.js#alwaysAddBlocks`), его js-файл будет взят в сборку стилей. Каждый блок (в `src/blocks/`) может содержать одноимённый js-файл. Если блок используется в разметке (или упомянут в `config.js#alwaysAddBlocks`), его js-файл будет взят в сборку стилей.
## Модульная сетка (flexbox) ## Модульная сетка (flexbox)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment