- Именование классов по БЭМ, разметка в [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` генерируется автоматически, содержит импорты стилевых файлов использованных в разметке блоков и импорты доп. файлов.
- Входная точка обработки 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. Из скомпилированных 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`, в котором:
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-файл будет взят всборку стилей.
Для глобальных действий предусмотрен `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-файл будет взят всборку стилей.