components

createBlock.js

@@ -15,44 +15,50 @@ if(blockName) {
   let dirPath = dirs.blocks + '/' + blockName + '/';
   mkdirp(dirPath, function(err){
     if(err) {
-      console.error('---------- Отмена операции: ' + err);
+      console.error('[NTH] Отмена операции: ' + err);
     }
     else {
+      console.log('[NTH] Создание папки ' + dirPath + ' (создана, если ещё не существует)');
       let dirImagesPath = dirPath + 'img';
       // mkdirp(dirImagesPath, function(err){
       //   if(err) {
-      //     console.error('---------- Папка для изображений не создана: ' + err);
+      //     console.error('[NTH] Папка для изображений не создана: ' + err);
       //   }
       //   else {
-      //     console.error('---------- Папка для изображений создана: ' + dirImagesPath);
+      //     console.error('[NTH] Папка для изображений создана: ' + dirImagesPath);
       //   }
       // });
       extensions.forEach(function(extention){
         let filePath = dirPath + blockName + '.' + extention;
         let fileContent = '';
+        let fileCreateMsg = '';
         if(extention == 'less') {
-          fileContent = '.' + blockName + ' {\n  \n}\n';
+          fileContent = '@import "' + dirs.less + '/variables.less";     // только для удобства обращения к переменным\n@import "' + dirs.less + '/mixins/mixins.less"; // только для удобства обращения к примесям\n\n\n.' + blockName + ' {\n  \n}\n';
         }
         else if(extention == 'html') {
           fileContent = '<div class="' + blockName + '">content</div>\n';
+          fileCreateMsg = '[NTH] Для вставки разметки: @@include(\'blocks/' + blockName + '/' + blockName + '.html\',{"key":"value"})  Подробнее: https://www.npmjs.com/package/gulp-file-include';
         }
         if(fileExist(filePath) === false) {
           fs.writeFile(filePath, fileContent, function(err) {
             if(err) {
-              return console.log('---------- Файл не создан: ' + err);
+              return console.log('[NTH] Файл НЕ создан: ' + err);
+            }
+            console.log('[NTH] Файл создан: ' + filePath);
+            if(fileCreateMsg) {
+              console.log(fileCreateMsg);
             }
-            console.log('---------- Файл создан: ' + filePath);
           });
         }
         else {
-          console.log('---------- Файл не создан: ' + filePath + ' уже существует');
+          console.log('[NTH] Файл НЕ создан: ' + filePath + ' уже существует');
         }
       });
     }
   });
 }
 else {
-  console.log('---------- Отмена операции: не указан блок');
+  console.log('[NTH] Отмена операции: не указан блок');
 }
 
 // Оставить в массиве только уникальные значения (убрать повторы)

gulpfile.js

@@ -39,7 +39,7 @@ const port = process.env.port ? process.env.port : 3000;
 
 // Файлы компилируемых компонентов
 let components = getComponentsFiles();
-console.log('---------- Список добавочных js/css-файлов и адресов картинок для копирования');
+console.log('---------- Список добавочных ресурсов:');
 console.log(components);
 
 
@@ -69,9 +69,11 @@ gulp.task('less', function () {
 });
 
 // Копирование добавочных CSS, которые хочется иметь отдельными файлами
-gulp.task('copy:css', function() {
+gulp.task('copy:css', function(callback) {
+  if(components.css.length > 0){
   console.log('---------- копирование CSS');
-  return gulp.src(components.css, {since: gulp.lastRun('copy:css')})
+  return
+    gulp.src(components.css, {since: gulp.lastRun('copy:css')})
     .pipe(postcss([
         autoprefixer({browsers: ['last 2 version']}),
         mqpacker
@@ -82,6 +84,11 @@ gulp.task('copy:css', function() {
     }))
     .pipe(debug({title: "RENAME:"}))
     .pipe(gulp.dest(dirs.build + '/css'));
+  }
+  else {
+    console.log('---------- копирование CSS: нет дополнительного CSS');
+    callback();
+  }
 });
 
 // Копирование и оптимизация изображений
@@ -109,9 +116,11 @@ gulp.task('img', function () {
 // });
 
 // Сборка SVG-спрайта
-gulp.task('svgstore', function () {
+gulp.task('svgstore', function (callback) {
+  let spritePath = dirs.source + '/img/svg_sprite/';
+  if(fileExist(spritePath) !== false) {
     console.log('---------- сборка SVG спрайта');
-  return gulp.src(dirs.source + '/img/svg_sprite/*.svg')
+    return gulp.src(spritePath + '*.svg')
       .pipe(svgmin(function (file) {
         return {
           plugins: [{
@@ -126,6 +135,11 @@ gulp.task('svgstore', function () {
         $('svg').attr('style',  'display:none');
       }))
       .pipe(gulp.dest(dirs.build + '/img'));
+  }
+  else {
+    console.log('---------- сборка SVG спрайта: нет папки с картинками');
+    callback();
+  }
 });
 
 // Сборка HTML
@@ -134,7 +148,8 @@ gulp.task('html', function() {
   return gulp.src(dirs.source + '/*.html')
     .pipe(fileinclude({
       prefix: '@@',
-      basepath: '@file'
+      basepath: '@file',
+      indent: true,
     }))
     .pipe(replace(/\n<!--DEVCOMMENT[\s\S]+?-->/gm, ''))
     .pipe(gulp.dest(dirs.build));
@@ -251,11 +266,11 @@ function getComponentsFiles() {
       // Имя CSS-файла, который нужно взять в сборку в этой итерации, если он существует
       let cssFile = dirs.blocks + '/' + componentName + '/' + componentFileName + '.css';
       // Если существует JS-файл — берём его в массив
-      if(fileExist(jsFile)) {
+      if(fileExistAndHasContent(jsFile)) {
         сomponentsFilesList.js.push(jsFile);
       }
       // Если существует CSS-файл — берём его в массив
-      if(fileExist(cssFile)) {
+      if(fileExistAndHasContent(cssFile)) {
         сomponentsFilesList.css.push(cssFile);
       }
       // Берём в массив изображения
@@ -263,11 +278,11 @@ function getComponentsFiles() {
     }
   });
   // Добавим глобальный JS-файл в начало массива с обрабатываемыми JS-файлами
-  if(fileExist(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(fileExist(dirs.source + '/css/global_additional-css.css')) {
+  if(fileExistAndHasContent(dirs.source + '/css/global_additional-css.css')) {
     сomponentsFilesList.css.unshift(dirs.source + '/css/global_additional-css.css');
   }
   // Добавим глобальные изображения
@@ -277,7 +292,7 @@ function getComponentsFiles() {
 }
 
 // Проверка существования файла и его размера (размер менее 2байт == файла нет)
-function fileExist(path) {
+function fileExistAndHasContent(path) {
   const fs = require('fs');
   try {
     fs.statSync(path);
@@ -288,6 +303,16 @@ function fileExist(path) {
   }
 }
 
+// Проверка существования файла
+function fileExist(path) {
+  const fs = require('fs');
+  try {
+    fs.statSync(path);
+  } catch(err) {
+    return !(err && err.code === 'ENOENT');
+  }
+}
+
 // Оставить в массиве только уникальные значения (убрать повторы)
 function uniqueArray(arr) {
   var objectTemp = {};

package.json

@@ -42,7 +42,8 @@
     "directories": {
       "source": "./src",
       "build": "./build",
-      "blocks": "./src/blocks"
+      "blocks": "./src/blocks",
+      "less": "./src/less"
     }
   }
 }

src/_blocks_library.html

@@ -187,24 +187,7 @@
       <p>Стилизация: БЭМ-блок <code>.table-responsive</code></p>
       <p class="alert  alert--danger"><strong>Внимание!</strong> Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора <code>th</code> будет полезной (делается индивидуально).</p>
       <p class="alert  alert--success">Приоритетным является не использование класса <code>.table-responsive</code>, а использование семантических БЭМ-классов и LESS-примеси <code>.table-responsive(sm);</code> (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).</p>
-      <table class="table-responsive">
-        <thead>
-          <tr>
-            <th>Имя и фамилия</th>
-            <th>Тип мироощущения</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td data-label="Имя и фамилия">Анатоле Вассерман</td>
-            <td data-label="Тип мироощущения">Девственность</td>
-          </tr>
-          <tr>
-            <td data-label="Имя и фамилия">Джакомо Казанова</td>
-            <td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
-          </tr>
-        </tbody>
-      </table>
+      @@include('blocks/table-responsive/table-responsive.html')
     </section>
   </section>
 

src/blocks/table-responsive/table-responsive.html

+<table class="table-responsive">
+  <thead>
+    <tr>
+      <th>Имя и фамилия</th>
+      <th>Тип мироощущения</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-label="Имя и фамилия">Анатоле Вассерман</td>
+      <td data-label="Тип мироощущения">Девственность</td>
+    </tr>
+    <tr>
+      <td data-label="Имя и фамилия">Джакомо Казанова</td>
+      <td data-label="Тип мироощущения">Небольшая распущенность с лёгкой примесью леденящих душу извращений, чудовищной лжи и имитатора известного органа, обитого телячьей кожей.</td>
+    </tr>
+  </tbody>
+</table>

src/blocks/table-responsive/table-responsive.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+//------------------------------------------------------------------------------
+//  Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
+//------------------------------------------------------------------------------
+
+.table-responsive {
+  // Таблицу с любым классом можно сделать адаптивной, вызывая эту примесь.
+  // ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
+  .table-responsive(sm);
+}

src/less/global_grid.less

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

src/less/global_scaffolding.less

+@import "./src/less/variables.less";     // только для удобства обращения к переменным
+@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+
 //------------------------------------------------------------------------------
 //  Базовая стилизация. Одновременно и аналог CSS-normalize, и стилизация тегов:
 //  базис, типографика, код, таблицы, формы...
-//  Но только тегов. Блоки описываются в индивидуальных файлах.
+//  Но только тегов. Блоки (классы) описываются в индивидуальных файлах.
 //------------------------------------------------------------------------------
 
 

src/less/style.less

-// @import "variables.less";
-// @import "mixins/mixins.less";
+@import "./src/less/variables.less";
+@import "./src/less/mixins/mixins.less";
 
-// @import "global_scaffolding.less";
-// @import "global_print.less";
-// @import "global_grid.less";
+@import "./src/less/global_scaffolding.less";
+@import "./src/less/global_print.less";
+@import "./src/less/global_grid.less";
 
-// @import "blocks/table-responsive.less";
+@import "./src/blocks/table-responsive/table-responsive.less";
 // @import "blocks/btn.less";
 // @import "blocks/form.less";
 // @import "blocks/field-text.less";
@@ -17,6 +17,3 @@
 // @import "blocks/field-file.less";
 // @import "blocks/field-range.less";
 // @import "blocks/field-actions.less";
-
-@import "global_grid.less";
-@import (less) "../blocks/demo-block/demo-block.less";