Skip to content

K
kpp
Commit c24dbd64 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

components

parent 03cc8c67
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 63 deletions
createBlock.js
View file @ c24dbd64
......@@ -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
View file @ c24dbd64
......@@ -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,23 +116,30 @@ gulp.task('img', function () {
// });
// Сборка SVG-спрайта
gulp.task('svgstore', function () {
console.log('---------- сборка SVG спрайта');
return gulp.src(dirs.source + '/img/svg_sprite/*.svg')
.pipe(svgmin(function (file) {
return {
plugins: [{
cleanupIDs: {
minify: true
}
}]
}
}))
.pipe(svgstore({ inlineSvg: true }))
.pipe(cheerio(function ($) {
$('svg').attr('style', 'display:none');
}))
.pipe(gulp.dest(dirs.build + '/img'));
gulp.task('svgstore', function (callback) {
let spritePath = dirs.source + '/img/svg_sprite/';
if(fileExist(spritePath) !== false) {
console.log('---------- сборка SVG спрайта');
return gulp.src(spritePath + '*.svg')
.pipe(svgmin(function (file) {
return {
plugins: [{
cleanupIDs: {
minify: true
}
}]
}
}))
.pipe(svgstore({ inlineSvg: true }))
.pipe(cheerio(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
View file @ c24dbd64
......@@ -42,7 +42,8 @@
"directories": {
"source": "./src",
"build": "./build",
"blocks": "./src/blocks"
"blocks": "./src/blocks",
"less": "./src/less"
}
}
}
src/_blocks_library.html
View file @ c24dbd64
......@@ -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 0 → 100644
View file @ c24dbd64
<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 0 → 100644
View file @ c24dbd64
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
//------------------------------------------------------------------------------
// Адаптивные таблицы (требуют наличия атрибутов data-label на тегах td)
//------------------------------------------------------------------------------
.table-responsive {
// Таблицу с любым классом можно сделать адаптивной, вызывая эту примесь.
// ВНИМАНИЕ: примесь ждет макс. ширину, на которой таблица ещё адпативна.
.table-responsive(sm);
}
src/less/global_grid.less
View file @ c24dbd64
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.container {
.container();
}
......
src/less/global_scaffolding.less
View file @ c24dbd64
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
//------------------------------------------------------------------------------
// Базовая стилизация. Одновременно и аналог CSS-normalize, и стилизация тегов:
// базис, типографика, код, таблицы, формы...
// Но только тегов. Блоки описываются в индивидуальных файлах.
// Но только тегов. Блоки (классы) описываются в индивидуальных файлах.
//------------------------------------------------------------------------------
......
src/less/style.less
View file @ c24dbd64
// @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";
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