components fin

README.md

@@ -86,7 +86,7 @@ node createBlock.js new-block js jade # создаст папку, new-block.htm
 ```bash
 build/          # Сюда собирается проект, здесь работает сервер автообновлений.
 src/            # Исходные файлы
-  _include/     # - фрагменты html, обще для всех страниц
+  _include/     # - фрагменты html для самого верха (секция head) и самого низа (перед закрывающим body) страницы
   blocks/       # - блоки (компоненты) проекта 
   css/          # - глобальный css-файл (будет скопирован только если существует и не пустой)
   fonts/        # - шрифты проекта (никак не обрабатываются, см. http://jaicab.com/localFont/)

TODO

-☐ Разместить файлы покомпонентно, импортировать less в диспетчере подключений, парсить его и брать в сборку JS-файлы импортированных компонент
-  ☐ Тестировать: сборку и обновление JS при изменении файлов
-  ☐ Тестировать: сборку и обновление JS при изменении диспетчера подключений
-  ☐ Тестировать: копирование добавочных CSS при изменении файлов
-  ☐ Тестировать: копирование добавочных CSS при изменении диспетчера подключений
-  ☐ Тестировать: копирование изображений при изменении файлов
-  ☐ Тестировать: копирование изображений при изменении диспетчера подключений
-
+☐ Вынести SVG-спрайты в отдельный компонент
 ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
 ☐ Сделать: Селект с идентичными везде уголками
 ☐ Сделать: Флажок-свитчер, радиокнопку-свитчер
@@ -38,9 +31,11 @@
 ☐ Сделать: Компонент для лёгкой интеграции Owl Carousel 2
 ☐ Сделать: Компонент для лёгкой интеграции к-л валидатора форм
 
-☐ Тестировать: корректно ли кастомный input[type=range] отправляет на сервер данные
-
 
 
 ✔ Потестировать условия в микро-шаблонизаторе: https://www.npmjs.com/package/gulp-file-include#if-statement @done (27.02.2016 15:12)
 ✔ ФОРМЫ: вынести стили хелп-текста в примесь @done (27.02.2016 20:26)
+✔ Разместить файлы покомпонентно, импортировать less в диспетчере подключений, парсить его и брать в сборку JS-файлы импортированных компонент @done (28.02.2016 00:07)
+  ✔ Тестировать: сборку и обновление JS при изменении файлов @done (27.02.2016 23:02)
+  ✔ Тестировать: копирование добавочных CSS при изменении файлов @done (28.02.2016 00:07)
+  ✔ Тестировать: копирование изображений при изменении файлов @done (28.02.2016 00:07)

gulpfile.js

@@ -38,9 +38,9 @@ const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
 const port = process.env.port ? process.env.port : 3000;
 
 // Файлы компилируемых компонентов
-let components = getComponentsFiles();
-console.log('---------- Список добавочных ресурсов:');
-console.log(components);
+let blocks = getComponentsFiles();
+console.log('---------- Список ресурсов:');
+console.log(blocks);
 
 
 
@@ -70,16 +70,16 @@ gulp.task('less', function () {
 
 // Копирование добавочных CSS, которые хочется иметь отдельными файлами
 gulp.task('copy:css', function(callback) {
-  if(components.css.length > 0){
-    console.log('---------- Копирование CSS');
-    return
-      gulp.src(components.css, {since: gulp.lastRun('copy:css')})
+  if(blocks.additionalCss.length > 0) {
+    console.log('---------- копирование CSS');
+    return gulp.src(blocks.additionalCss, {since: gulp.lastRun('copy:css')})
       .pipe(postcss([
           autoprefixer({browsers: ['last 2 version']}),
           mqpacker
       ]))
       .pipe(cleanss())
       .pipe(rename(function (path) {
+        path.basename = 'additional-styles',
         path.extname = '.min.css'
       }))
       .pipe(debug({title: "RENAME:"}))
@@ -94,7 +94,7 @@ gulp.task('copy:css', function(callback) {
 // Копирование и оптимизация изображений
 gulp.task('img', function () {
   console.log('---------- Копирование и оптимизация картинок');
-  return gulp.src(components.img, {since: gulp.lastRun('img')}) // только для изменившихся с последнего запуска файлов
+  return gulp.src(blocks.img, {since: gulp.lastRun('img')}) // только для изменившихся с последнего запуска файлов
     .pipe(newer(dirs.build + '/img'))  // оставить в потоке только изменившиеся файлы
     .pipe(imagemin({
         progressive: true,
@@ -117,7 +117,7 @@ gulp.task('img', function () {
 
 // Сборка SVG-спрайта
 gulp.task('svgstore', function (callback) {
-  let spritePath = dirs.source + '/img/svg_sprite/';
+  let spritePath = dirs.source + '/img/svg-sprite/';
   if(fileExist(spritePath) !== false) {
     console.log('---------- Сборка SVG спрайта');
     return gulp.src(spritePath + '*.svg')
@@ -157,9 +157,9 @@ gulp.task('html', function() {
 
 // Конкатенация и углификация Javascript
 gulp.task('js', function (callback) {
-  if(components.js.length > 0){
-    console.log('---------- Обработка Javascript');
-    return gulp.src(components.js)
+  if(blocks.js.length > 0){
+    console.log('---------- Обработка JS');
+    return gulp.src(blocks.js)
       .pipe(debug({title: "JS:"}))
       .pipe(gulpIf(isDev, sourcemaps.init()))
       .pipe(concat('script.min.js'))
@@ -175,7 +175,7 @@ gulp.task('js', function (callback) {
       .pipe(gulp.dest(dirs.build + '/js'));
   }
   else {
-    console.log('---------- Обработка Javascript: в сборке нет js-файлов');
+    console.log('---------- Обработка JS: в сборке нет JS-файлов');
     callback();
   }
 });
@@ -204,26 +204,20 @@ gulp.task('watch', function () {
     dirs.source + '/_include/*.html',
     dirs.blocks + '/**/*.html',
   ], gulp.series('html'));
-  // Слежение за LESS
-  gulp.watch([
-    dirs.source + '/less/**/*.less',
-    dirs.blocks + '/**/*.less', // вот тут хорошо бы следить только за компилируемыми
-  ], gulp.series('less'));
-  // Слежение за добавочными CSS
-  gulp.watch([
-    dirs.source + '/css/*.css',
-    dirs.blocks + '/**/*.css',
-  ], gulp.series('copy:css'));
-  // Слежение за изображениями
-  gulp.watch([
-    dirs.source + '/img/*.{jpg,jpeg,gif,png,svg}',
-    dirs.blocks + '/**/img/*.{jpg,jpeg,gif,png,svg}'
-  ], gulp.series('img'));
-  // Слежение за Javascript
-  gulp.watch([
-    dirs.source + '/**/*.js',
-    dirs.blocks + '/**/*.js',
-  ], gulp.series('js'));
+  // Слежение за LESS (они точно есть)
+  gulp.watch(blocks.less, gulp.series('less'));
+  // Слежение за добавочными CSS, если нужно
+  if(blocks.additionalCss) {
+    gulp.watch(blocks.additionalCss, gulp.series('copy:css'));
+  }
+  // Слежение за изображениями, если нужно
+  if(blocks.img) {
+    gulp.watch(blocks.img, gulp.series('img'));
+  }
+  // Слежение за Javascript, если нужно
+  if(blocks.js) {
+    gulp.watch(blocks.js, gulp.series('js'));
+  }
 });
 
 // Локальный сервер
@@ -245,11 +239,13 @@ gulp.task('default',
 
 // Определение собираемых компонентов
 function getComponentsFiles() {
-  // Создаем объект для списка файлов компонентов
+  // Создаем объект для служебных данных
   let сomponentsFilesList = {
-    js: [],  // тут будут JS-файлы компонент в том же порядке, в котором подключены less-файлы
-    img: [], // тут будет массив из «путь_до_компонента/img/*.{jpg,jpeg,gif,png,svg}» для всех импортируемых компонент
-    css: [], // тут будут CSS-файлы компонент в том же порядке, в котором подключены less-файлы
+    blocks: [],        // тут будут блоки
+    less: [],          // тут будут LESS-файлы в том же порядке, в котором они подключены
+    js: [],            // тут будут JS-файлы в том же порядке, в котором подключены LESS-файлы
+    img: [],           // тут будет массив из «путь_до_блока/img/*.{jpg,jpeg,gif,png,svg}» для всех импортируемых блоков
+    additionalCss: [], // тут будут добавочные CSS-файлы блоков в том же порядке, в котором подключены LESS-файлы
   };
   // Читаем файл диспетчера подключений
   let connectManager = fs.readFileSync(dirs.source + '/less/style.less', 'utf8');
@@ -260,41 +256,48 @@ function getComponentsFiles() {
   });
   // Обойдём массив и запишем его части в объект результирующей переменной
   fileSystem.forEach(function(item, i) {
-    // Попробуем вычленить компонент из строки импорта
+    // Попробуем вычленить блок из строки импорта
     let componentData = /\/blocks\/(.+?)(\/)(.+?)(?=.(less|css))/g.exec(item);
-    // Если это компонент и получилось извлечь имя файла
+    // Если это блок и получилось извлечь имя файла
     if (componentData !== null && componentData[3]) {
-      // Название компонента (название папки)
+      // Название блока (название папки)
       let componentName = componentData[1];
       // Имя подключаемого файла без расширения
       let componentFileName = componentData[3];
       // Имя JS-файла, который нужно взять в сборку, если он существует
       let jsFile = dirs.blocks + '/' + componentName + '/' + componentFileName + '.js';
-      // Имя CSS-файла, который нужно взять в сборку, если он существует
+      // Имя CSS-файла, который нужно обработать, если он существует
       let cssFile = dirs.blocks + '/' + componentName + '/' + componentFileName + '.css';
-      // Папка с картинками, которую нужно взять в сборку, если она существует
+      // Папка с картинками, которую нужно взять в обработку, если она существует
       let imagesDir = dirs.blocks + '/' + componentName + '/img';
-      // Если существует JS-файл — берём его в массив
+      // Добавляем в массив с результатом название блока
+      сomponentsFilesList.blocks.push(componentName);
+      // Добавляем в массив с результатом LESS-файл
+      сomponentsFilesList.less.push(dirs.source + componentData[0] + '.' + componentData[4]);
+      // Если существует JS-файл — добавляем его в массив с результатом
       if(fileExistAndHasContent(jsFile)) {
         сomponentsFilesList.js.push(jsFile);
       }
-      // Если существует CSS-файл — берём его в массив
+      // Если существует CSS-файл — добавляем его в массив с результатом
       if(fileExistAndHasContent(cssFile)) {
-        сomponentsFilesList.css.push(cssFile);
+        сomponentsFilesList.additionalCss.push(cssFile);
       }
-      // Берём в массив изображения
+      // Если есть папка с изображениями, добавляем её в массив с результатом
       if(fileExist(imagesDir) !== false) {
         сomponentsFilesList.img.push(imagesDir + '/*.{jpg,jpeg,gif,png,svg}');
       }
     }
   });
+  сomponentsFilesList.blocks = uniqueArray(сomponentsFilesList.blocks);
+  // Добавим глобальныe LESS-файлы в массив с обрабатываемыми LESS-файлами
+  сomponentsFilesList.less.push(dirs.source + '/less/**/*.less');
   // Добавим глобальный JS-файл в начало массива с обрабатываемыми JS-файлами
-  if(fileExistAndHasContent(dirs.source + '/js/global_script.js')) {
-    сomponentsFilesList.js.unshift(dirs.source + '/js/global_script.js');
+  if(fileExistAndHasContent(dirs.source + '/js/global-script.js')) {
+    сomponentsFilesList.js.unshift(dirs.source + '/js/global-script.js');
   }
   // Добавим глобальный CSS-файл в начало массива с обрабатываемыми CSS-файлами
-  if(fileExistAndHasContent(dirs.source + '/css/global_additional-css.css')) {
-    сomponentsFilesList.css.unshift(dirs.source + '/css/global_additional-css.css');
+  if(fileExistAndHasContent(dirs.source + '/css/global-additional-css.css')) {
+    сomponentsFilesList.additionalCss.unshift(dirs.source + '/css/global-additional-css.css');
   }
   // Добавим глобальные изображения
   сomponentsFilesList.img.unshift(dirs.source + '/img/*.{jpg,jpeg,gif,png,svg}');

src/_blocks_library.html

@@ -9,7 +9,7 @@
 </head>
 
 <body>
-@@include('_include/page_header.html')
+@@include('blocks/page-header/page-header.html')
 
 <section class="container  blocks-library">
   <h1>Библиотека блоков <a href="/">проекта</a></h1>
@@ -71,7 +71,7 @@
         <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Грустный предупредила, дал приставка составитель решила подпоясал запятых сих ручеек которой власти до, над жизни возвращайся силуэт что не курсивных.</p>
       </div>
       <div class="col-md-6">
-        <p><img src="img/TEMP_DavidBlaine.jpg" alt=""></p>
+        <p><img src="img/TEMP-DavidBlaine.jpg" alt=""></p>
         <table>
           <tr>
             <td><code>&lt;a&gt;</code></td>
@@ -425,7 +425,6 @@
     <h2 id="btn">Кнопки</h2>
     <p>Стилизация: БЭМ-блок <code>.btn</code> и модификаторы.</p>
     <p class="alert  alert--success">Приоритетным является подход, в котором используются LESS-примеси <code>.btn()</code>, <code>.btn-color(цвет_текста; цвет_фона; цвет_бордюра)</code> и <code>.btn-size([sm|md|lg])</code>.</p>
-    <p class="alert  alert--success">Все кнопки — <code>display: inline-flex;</code>.</p>
     <p>
       <input type="text" value="Текстовое поле для сравнения высоты" title="Текстовое поле для сравнения высоты" style="width:70px">
       <a href="" class="btn">Cсылка</a>
@@ -550,7 +549,7 @@
 
 </section>
 
-@@include('_include/page_footer.html')
+@@include('blocks/page-footer/page-footer.html')
 @@include('_include/page_bottom.html')
 </body>
 </html>

src/_include/page_footer.html

-<footer class="page-footer">
-  Копирайт
-</footer>

src/_include/page_header.html

-<header class="page-header">
-  Логотип
-</header>

src/blocks/btn/btn.html

+<!--DEV
+
+<a class="btn" href="">Cсылка</a>
+<input class="btn" type="submit" value="Input">
+<button class="btn">Button</button>
+
+-->

src/less/blocks/btn.less → src/blocks/btn/btn.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
 .btn {
   .btn();
   .btn-color(@text-color; @gray-lighter; @gray-lighter);

src/blocks/form/form--horizontal.html

+<!--DEV
+
+<form action="" class="form  form--horizontal">
+  <fieldset>
+    <legend>Название формы</legend>
+    <label class="field-text">...</label>
+    <div class="field-actions">...</div>
+  </fieldset>
+</form>
+
+-->

src/less/blocks/form.less → src/blocks/form/form--horizontal.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
 .form {
-  &:not(:last-child) {
-    margin-bottom: @line-height;
-  }
 
   &--horizontal {
 
@@ -53,3 +54,4 @@
     }
   }
 }
+

src/blocks/form/form.html

+<!--DEV
+
+<form action="" class="form">
+  <fieldset>
+    <legend>Название формы</legend>
+    <label class="field-text">...</label>
+    <div class="field-actions">...</div>
+  </fieldset>
+</form>
+
+-->

src/blocks/form/form.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.form {
+  &:not(:last-child) {
+    margin-bottom: @line-height;
+  }
+}

src/blocks/page-footer/page-footer.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/page-footer/page-footer.html')
+
+-->
+<footer class="page-footer">
+  page-footer
+</footer>

src/blocks/page-footer/page-footer.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.page-footer {
+  
+}

src/blocks/page-header/page-header.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/page-header/page-header.html')
+
+-->
+<header class="page-header">
+  page-header
+</header>

src/blocks/page-header/page-header.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.page-header {
+  
+}

src/img/form_field_bg/check.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18"><path d="M24 3.516q0 .606-.436 1.03L10.25 17.576Q9.814 18 9.195 18q-.618 0-1.05-.425L.434 10.032Q0 9.605 0 9.002q0-.605.434-1.03l2.106-2.06q.434-.424 1.052-.424.62 0 1.053.425l4.55 4.47L19.353.423Q19.788 0 20.406 0q.617 0 1.052.424l2.106 2.06q.434.424.434 1.03z" fill="#5cb85c"/></svg>
\ No newline at end of file

src/img/form_field_bg/close.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M18 14.485q0 .606-.425 1.03l-2.06 2.06q-.425.425-1.03.425t-1.03-.423L9 13.12l-4.455 4.455Q4.12 18 3.515 18t-1.03-.423l-2.06-2.06Q0 15.09 0 14.487q0-.605.423-1.03L4.88 9 .424 4.545Q0 4.12 0 3.515t.423-1.03l2.06-2.06Q2.91 0 3.513 0q.605 0 1.03.423L9 4.88 13.455.424Q13.88 0 14.485 0t1.03.423l2.06 2.06Q18 2.91 18 3.513q0 .605-.423 1.03L13.12 9l4.455 4.455q.425.425.425 1.03z" fill="#d9534f"/></svg>
\ No newline at end of file

src/img/svg_sprite/readme.md → src/img/svg-sprite/readme.md

-Из SVG-файлов этой папки будет собран спрайт — файл svg_sprite.svg в папке сборки, подпапке с изображениями.
+Из SVG-файлов этой папки будет собран спрайт — файл svg-sprite.svg в папке сборки, подпапке с изображениями.

src/index.html

@@ -9,12 +9,11 @@
 </head>
 
 <body>
-@@include('_include/page_header.html')
+@@include('blocks/page-header/page-header.html')
 
-<h1>Заголовок h1</h1>
-<img src="img/TEMP_DavidBlaine.jpg" alt="">
+<h1>Содержимое</h1>
 
-@@include('_include/page_footer.html')
+@@include('blocks/page-footer/page-footer.html')
 @@include('_include/page_bottom.html')
 </body>
 </html>

src/less/blocks/field-actions.less

-.field-actions {
-  display: block;
-  margin-top: @line-height;
-  margin-bottom: (@line-height / 2);
-}

src/less/readme.md

+Глобальные стилевые файлы и диспетчер подключений. Стилизация блоков — в папках блоков.

src/less/style.less

 @import "./src/less/variables.less";
 @import "./src/less/mixins/mixins.less";
 
-@import "./src/less/global_scaffolding.less";
-@import "./src/less/global_print.less";
-@import "./src/less/global_grid.less";
+@import "./src/less/global-scaffolding.less";
+@import "./src/less/global-print.less";
+@import "./src/less/global-grid.less";
 
+@import "./src/blocks/btn/btn.less";
 @import "./src/blocks/table-responsive/table-responsive.less";
 @import "./src/blocks/field-text/field-text.less";
 @import "./src/blocks/field-checkbox/field-checkbox.less";
@@ -15,13 +16,5 @@
 @import "./src/blocks/field-range/field-range.less";
 @import "./src/blocks/field-file/field-file.less";
 @import "./src/blocks/field-actions/field-actions.less";
-
-// @import "blocks/btn.less";
-// @import "blocks/form.less";
-// @import "blocks/field-text.less";
-// @import "blocks/field-radio.less";
-// @import "blocks/field-radio--custom.less";
-// @import "blocks/field-select.less";
-// @import "blocks/field-file.less";
-// @import "blocks/field-range.less";
-// @import "blocks/field-actions.less";
+@import "./src/blocks/form/form.less";
+@import "./src/blocks/form/form--horizontal.less";