Разные технологии для разных уровней (сборка через gulp)

Форум /

Допустим, в моем проекте есть 2 уровня переопределения: "lib" и "project". На обоих уровнях присутствуют технологии "js" и "helper.js". Мне нужно, чтобы в итоговую сборку попали файлы "js" и "helper.js" из "project", и только "helper.js" из "lib". Т.е. что-то вроде этого:

const src = require('gulp-bem-src');

src(
    ['lib', 'project']
    [{ block: 'button' }],
    'js',
    {
        config: {
            'lib': {
                scheme: 'nested',
                techMap: ['helper.js']
            }
            'project': {
                scheme: 'nested',
                techMap: ['js', 'helper.js']
            }
        }
    }
)

Можно ли такое реализовать в gulp? В документации ничего такого не нашел, даже в методологии такие кейсы не описываются. Есть, конечно, gulp-merge и другие способы объединить потоки в gulp, но они будут замедлять сборку, т.к. придется заново вызывать gulp-bem-src, он будет заново разрешать зависимости т.д..

4 years ago

Realetive

«Удалите» *.helper.js-файлы из project-уровня.

4 years ago

IkorJefocur

Мне эти файлы нужны на project-уровне. Суть в том, что мне не нужны файлы ".js" из "lib".

4 years ago

Realetive

Тогда больше похоже на третий уровень переопределения (lib, project, helpers). И уже сборщиком решать, какие подключать.

4 years ago

IkorJefocur

Нет, такой вариант не подойдет. Helper'ы из project могут доопределять helper'ы из lib. Также они нужны для корректной работы основных js файлов.

4 years ago

Realetive

Это именно кейс уровней переопределения — один из уровней (ок, пусть он называется не helper, а lib-js) доопределяет сборку .js- файлами при необходимости (т. е. по условию). А из lib-уровня мы все .js-файлы переносим в уровень lib-js.

4 years ago

IkorJefocur

Вообще "helper.js" и "js" с двумя уровнями я привел чисто для примера, не хотел усложнять. На деле ситуация обстоит несколько сложней.

Есть 7 уровней: core, lib, base, layout, visual, desktop, mobile. Core и lib - уровни библиотек, не относящихся напрямую к бэм-сущностям. Base - как правило bemtree / bemhtml / js реализация блоков, по сути базовая структура без внешнего вида. Layout и visual - Внешний вид блоков. Desktop и mobile - устройства.

Суть в том, что в проекте используется css-препроцессор sass. В нем есть placeholder-классы, которые не попадают в итоговый css, если их просто объявить, но не использовать (не расширить). И тут sass-файлы делятся на .sass и .helper.sass. Файлы .helper.sass и представляют собой наборы этих самых placeholder'ов для конкретного блока либо элемента. Должна быть возможность переопределения placeholder'ов, в частности с уровня layout на уровне visual и далее на уровнях устройств. Таким образом, даже если placeholder уже использован в layout, он все равно там изменится при изменении в visual.

И все бы ничего, но тут возникает следующий момент: реализация блоков на устройствах как бы зависит от реализации на всех уровнях под ними. Под "как бы" я подразумеваю то, что эти самые placeholder'ы должны быть доступны для sass-реализации устройств. Однако sass-реализация нижних уровней не обязательно попадет в итоговую сборку, что на деле и происходит.

Короче говоря, на устройствах нужно абстрагироваться от тонкостей сборки и писать код так, как будто подключены все уровни до этих устройств, даже если по факту это не так. Для этого и нужно подключить helper'ы (абстрактную реализацию) со всех уровней, а просто sass (конкретную реализацию) только с уровней устройств.

Вот пример того, как должно быть:

// blocks/layout/contacts/contacts.helper.sass
%helper--contacts
    &_layout
        &_grid
            display: grid
            grid-template: auto auto 50px / 300px 1fr
        &_column
            display: flex
            flex-direction: column
            align-items: center

// blocks/visual/contacts/contacts.helper.sass
%helper--contacts
    &_layout
        &_grid
            grid-row-gap: 30px

// blocks/visual/contacts/contacts.sass
.contacts
    background-color: #eee

// blocks/desktop/contacts/contacts.sass
.contacts
    @extend %helper--contacts_layout_grid

// blocks/mobile/contacts/contacts.sass
.contacts
    @extend %helper--contacts_layout_column

/* bundles/index/all.css */
.contacts {
    background-color: #eee;
}

/* bundles/index/desktop.css */
.contacts {
    display: grid;
    grid-template: auto auto 50px / 300px 1fr;
    grid-row-gap: 30px;
}

/* bundles/index/mobile.css */
.contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Чтобы оставлять комментарии, необходимо авторизоваться.