How to incrementally build a BEM project with Gulp4 and the gulp-bem-src package???

Question

BEM

1. INTRODUCTION:
1.1 "I'm not a magician, I'm just learning" (c)
1.2 Technologies used in the build: sass(scss), pug, js, gulp4
1.3 Profile npm packages used to solve this task: gulp-bem-src
Below npm package listing here --> https://www.npmjs.com/package/gulp-bem-src

const src = require('gulp-bem-src');
 
const postcss = require('gulp-postcss');
const postcssUrl = require('postcss-url');
 
src(
    ['libs/islands/common.blocks/', 'blocks']
    [{ block: 'button' }],
    'styles', // wished dependencies technology
    {
        skipResolvingDependencies: false, // false by default, set to true if you dont want to resolve deps
        techMap: { // use this to map internal techs to file techs
            styles: ['sass', 'styl', 'css']
        },
        config: {
            'libs/bem-core/common.blocks': { scheme: 'nested' },
            'libs/bem-core/desktop.blocks': { scheme: 'nested' },
            'libs/bem-components/common.blocks': { scheme: 'nested' },
            'libs/bem-components/desktop.blocks': { scheme: 'nested' },
            'libs/bem-components/design/common.blocks': { scheme: 'nested' },
            'libs/bem-components/design/desktop.blocks': { scheme: 'nested' },
            'common.blocks': { scheme: 'nested' },
            'desktop.blocks': { scheme: 'nested' }
        }
    }
)
.pipe(postcss([
    postcssUrl({ url: 'inline' })
]))
.pipe(concat(`${bundle.name()}.css`));

In general, the plugin code is more or less clear, but the following questions arose.
How to validly define technologies for pug and js in this line ??? I tried to pass in the form of an array separated by commas [ 'styles', 'templates', 'javascript' ] and [ 'styles', 'pug, 'js' ] , however, firstly, I do not know exactly how these technologies should be named for pug and js, and secondly, at this point the function expects to receive a string as an argument, about which a message is displayed in the console: Also, questions arose on this line - Again, . pipe() , concat() and ES2015 format string syntax is clear to me,'styles', // wished dependencies technology


.pipe(concat(`${bundle.name()}.css`));
??? I guess that this thing is somehow responsible for automatically generating the name of the output bundle, but how to work with it and why do I get this error ??? :

I think that this may be tritely related to the scope, because. gulpfile.js architecture is supposed to be modular, and maybe I just didn't export something?!
In the case when I hardcode the name of the bundle (file) for example, "bundleName.scss" everything works:

and a bundle with the name "bundleName.scss" is created in the directory "./app/bundles" :

1.3) There is the following project structure:
2. WHAT ALREADY HAPPENED:
2.1 So far, at this stage, it turns out to be crooked to bundle only scss-implementation of blocks into bundles, however, dependency declarations for blocks, written in files like blockName.deps.js, do not work (for example, for block "block-a" it looks like this:
)
3. WHAT YOU NEED TO RECEIVE IN THE OUTPUT:
3.1) Universal incremental assembly of BEM entities (blocks) using Gulp4 in accordance with :
3.1.1 the file structure of the project (any nesting of files and folders should be taken into account);
3.1.2 redefinition levels of BEM blocks (in this case there are two of them - "common.blocks" and "touch.blocks" );
3.1.3 a specific declaration of dependencies in a particular case (for example, for the "block-a" block, this dependency is specified in the file "block-a.deps.js" );
*NOTES:
1 - do not offer bem-tools, bem-sdk and other similar solutions))) I am familiar with the starting template from CSSSR, it is cool, but you need your own bike
2 - Inspired by the presentations of Vladimir Grinenko and this webinar in particular: https: //youtu.be/n0iF2zxa3DY . There, in the course of the video, they themselves corrected the code on the fly, which is given at https://www.npmjs.com/package/gulp-bem-src , but this did not help me much.
3 - Link to repository - https://github.com/ne2da/gulp-bem-boilerplate.git
ps Thank you all in advance for taking the time to read my footcloth. Also, I will be glad to constructive criticism, advice, wishes and useful links.
If some of you already use this plugin, please share your combat experience.

Answer 1

Everything you need out of the box is here, except for dependencies, but you can finish it if you wish .