components → blocks

README.md

@@ -5,3 +5,32 @@
 Использование: `npm start` (дабы не ставить глобально 4-ю версию gulp, которая сейчас в альфе). После `npm start` можно через пробел указать задачу. К примеру `npm start less` выполнит только задачу `less` из `gulpfile.js` (полный список задач смотри в `gulpfile.js`).
 
 `port=3004 npm start` — для запуска сервера автообновлений на указанном порту.
+
+
+
+## Парадигма
+
+- Используется именование классов и файлов по БЭМ.
+- Каждый БЭМ-блок в своей папке внутри `/src/blocks/` (less, js (не обязательно), картинки (не обязательно), разметка (не обязательно)).
+- Есть глобальные файлы: css, js, шрифты, картинки, less-файлы (переменные, глобальная стилизация...).
+- Есть диспетчер подключений `/src/less/style.less`. Если в нем импортирован less-файл какого-либо блока, этот блок считается используемым (обрабатывается его js и доп. файлы).
+
+Каждый блок — как минимум, папка и less-файл. Максимум возможностей — см. файлы внутри `/src/blocks/demo-block`.
+
+
+
+## Назначение папок
+
+```
+build/          # Сюда собирается проект, здесь работает сервер автообновлений.
+src/            # Исходные файлы
+  _include/     # - фрагменты html, обще для всех страниц
+  blocks/       # - блоки (компоненты) проекта
+  css/          # - глобальный css-файл (не обязательно — подключится только если не пустой)
+  fonts/        # - глобальные шрифты (не обязательно — будут скопированы только если есть)
+  img/          # - глобальные картинки (не обязательно, будут скопированы только из корня этой папки)
+  js/           # - глобальный js-файл (не обязательно — подключится только если не пустой)
+  less/         # - диспетчер подключений и глобальные стили
+  _blocks_library.html  # библиотека блоков проекта
+  index.html            # главная страница проекта
+```

TODO

@@ -5,6 +5,7 @@
   ☐ Тестировать: копирование добавочных CSS при изменении файлов
   ☐ Тестировать: копирование изображений при изменении диспетчера подключений
   ☐ Тестировать: копирование изображений при изменении диспетчера подключений
+  ☐ Разобраться с обработкой шрифтов
 
 ☐ Сделать: Кнопка с иконкой
 ☐ Сделать: Кнопка-иконка

gulpfile.js

@@ -34,7 +34,7 @@ const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
 const port = process.env.port ? process.env.port : 3000;
 
 // Расположение папки с компонентами
-const componentsFolder = './src/components/';
+const componentsFolder = './src/blocks/';
 
 // Файлы компилируемых компонентов
 let components = getComponentsFiles();
@@ -242,7 +242,7 @@ function getComponentsFiles() {
         сomponentsFilesList.css.push(cssFile);
       }
       // Берём в массив изображения
-      сomponentsFilesList.img.push(componentsFolder + componentName + '/*.{jpg,jpeg,gif,png,svg}');
+      сomponentsFilesList.img.push(componentsFolder + componentName + '/img/*.{jpg,jpeg,gif,png,svg}');
     }
   });
   // Добавим глобальный JS-файл в начало массива с обрабатываемыми JS-файлами

src/blocks/demo-block/demo-block--mod.js

+// Интерактив модификатора
+// Этот файл попадет в сборку только если в диспетчере подключений будет импортирован одноименный less-файл.
+
+alert('Тестовый компонент: в сборку js взят файл demo-block--mod.js');

src/blocks/demo-block/demo-block--mod.less

+// Опциональный модификатор блока
+// Этот файл может не быть импортирован в диспетчере подключений, если эта модификация не нужна на проекте.
+
+.demo-block--mod {
+  color: #ff0;
+}

src/blocks/demo-block/demo-block.html

+<!--DEVCOMMENT Пример разметки, используемый на проекте -->
+
+<div class="demo-block">Тестовый блок</div>

src/blocks/demo-block/demo-block.js

+// Главный js блока
+// Этот файл попадет в сборку только если в диспетчере подключений будет импортирован одноименный less-файл
+
+alert('Тестовый компонент: в сборку js взят файл  demo-block.js');

src/blocks/demo-block/demo-block.less

+// Главный стилизационный файл блока
+// Если этот файл не импортирован в диспетчере подключений, блок на проекте, видимо, не используется.
+
+.demo-block {
+  display: block;
+}

src/components/test-component/test-component.less → src/blocks/temp-block/temp-block.less

-.test-component {
+.temp-block {
   display: block;
 }

src/components/second-component/second-component.less

-.second-component {
-  display: block;
-}

src/components/test-component/test-component--modified.js

-alert('Тестовый компонент - модификатор');

src/components/test-component/test-component--modified.less

-.test-component--modofoed {
-  color: #ff0;
-}

src/components/test-component/test-component.html

-<div class="test-component">Тестовый компонент</div>

src/components/test-component/test-component.js

-alert('Тестовый компонент');

src/less/style.less

@@ -18,7 +18,7 @@
 // @import "blocks/field-range.less";
 // @import "blocks/field-actions.less";
 
-@import (less) "../components/test-component/test-component.less";
-@import "../components/test-component/test-component--modified.less";
-@import "../components/second-component/second-component.less";
 @import "global_grid.less";
+@import (less) "../blocks/demo-block/demo-block.less";
+@import "../blocks/demo-block/demo-block--mod.less";
+@import "../blocks/temp-block/temp-block.less";