Skip to content

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

components fin

parent 51b1ff35
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 100 deletions
README.md
View file @ e2eac246
......@@ -86,8 +86,8 @@ node createBlock.js new-block js jade # создаст папку, new-block.htm
```bash
build/ # Сюда собирается проект, здесь работает сервер автообновлений.
src/ # Исходные файлы
_include/ # - фрагменты html, обще для всех страниц
blocks/ # - блоки (компоненты) проекта
_include/ # - фрагменты html для самого верха (секция head) и самого низа (перед закрывающим body) страницы
blocks/ # - блоки (компоненты) проекта
css/ # - глобальный css-файл (будет скопирован только если существует и не пустой)
fonts/ # - шрифты проекта (никак не обрабатываются, см. http://jaicab.com/localFont/)
img/ # - глобальные картинки (будут обработаны только из корня этой папки, подпапки игнорируются)
......
TODO
View file @ e2eac246
☐ Разместить файлы покомпонентно, импортировать 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
View file @ e2eac246
......@@ -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
View file @ e2eac246
......@@ -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 deleted 100644 → 0
View file @ 51b1ff35
<footer class="page-footer">
Копирайт
</footer>
src/_include/page_header.html deleted 100644 → 0
View file @ 51b1ff35
<header class="page-header">
Логотип
</header>
src/blocks/btn/btn.html 0 → 100644
View file @ e2eac246
<!--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
View file @ e2eac246
@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 0 → 100644
View file @ e2eac246
<!--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
View file @ e2eac246
@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 0 → 100644
View file @ e2eac246
<!--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 0 → 100644
View file @ e2eac246
@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 0 → 100644
View file @ e2eac246
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/page-footer/page-footer.html')
-->
<footer class="page-footer">
page-footer
</footer>
src/blocks/page-footer/page-footer.less 0 → 100644
View file @ e2eac246
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.page-footer {
}
src/blocks/page-header/page-header.html 0 → 100644
View file @ e2eac246
<!--DEV
Нужно убрать пробел между @-ами:
@ @include('blocks/page-header/page-header.html')
-->
<header class="page-header">
page-header
</header>
src/blocks/page-header/page-header.less 0 → 100644
View file @ e2eac246
@import "./src/less/variables.less"; // только для удобства обращения к переменным
@import "./src/less/mixins/mixins.less"; // только для удобства обращения к примесям
.page-header {
}
src/img/form_field_bg/check.svg deleted 100644 → 0
View file @ 51b1ff35
<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 deleted 100644 → 0
View file @ 51b1ff35
<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
View file @ e2eac246
Из SVG-файлов этой папки будет собран спрайт — файл svg_sprite.svg в папке сборки, подпапке с изображениями.
Из SVG-файлов этой папки будет собран спрайт — файл svg-sprite.svg в папке сборки, подпапке с изображениями.
src/index.html
View file @ e2eac246
......@@ -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 deleted 100644 → 0
View file @ 51b1ff35
.field-actions {
display: block;
margin-top: @line-height;
margin-bottom: (@line-height / 2);
}
src/less/readme.md 0 → 100644
View file @ e2eac246
Глобальные стилевые файлы и диспетчер подключений. Стилизация блоков — в папках блоков.
src/less/style.less
View file @ e2eac246
@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";
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