A distribution is a set of bundles. Each bundle is a build of all BEM entities for a project platform.
dist/
├── desktop/
├── touch-phone/
└── touch-pad/
To learn how to build a bundle, read Building a bundle.
The project consists of three platforms:
desktop
— Includes thecommon.blocks
anddesktop.blocks
levels.touch-phone
— Includes thecommon.blocks
,touch.blocks
andtouch-phone.blocks
levels.touch-pad
— Includes thecommon.blocks
,touch.blocks
andtouch-pad.blocks
levels.
Project file system:
.enb/
└── make.js # The ENB config file
common.blocks/ # common level
desktop.blocks/ # desktop level
touch.blocks/ # common level for touch interfaces
touch-phone.blocks/ # touch pad level
touch-pad.blocks/ # touch phones level
To build a distribution from css
and js
for each platform, you need to:
-
Scan the platform levels and find all BEM entities in the project.
-
Generate a BEMDECL file from all BEM entities found on the platform levels (1).
-
Sort the list of BEM entities.
-
Get a list of files sorted by the list of BEM entities (3).
-
Use technologies to build
css
andjs
and declare targets.The ENB config file (.enb/make.js) will look like this:
var techs = require('enb-bem-techs'), css = require('enb/techs/css'), js = require('enb/techs/js'), levels = { 'desktop': ['common.blocks', 'desktop.blocks'], 'touch-phone': ['common.blocks', 'touch.blocks', 'touch-phone.blocks'], 'touch-pad': ['common.blocks', 'touch.blocks', 'touch-pad.blocks'] }, platforms = Object.keys(levels);
module.exports = function (config) { platforms.forEach(function(platform) { var node = path.join('dist', platform);
// Configure a distribution build for a certain platform.
// The `config.node` method creates the `dist/platform-name` directory,
// if it doesn't exist yet.
config.node(node, function(nodeConfig) {
nodeConfig.addTechs([
[techs.levels, {
levels: levels[platform] // (1) -> `?.levels`
}],
[techs.levelsToBemdecl], // (2) `?.levels` -> `?.bemdecl.js`
[techs.deps], // (3) `?.bemdecl.js` -> `?.deps.js`
[techs.files], // (4) `?.levels` + `?.deps.js` -> `?.files`
[css],
[js]
]);
nodeConfig.addTargets(['?.css', '?.js']);
}
}
};
6. Launch the build in the console:
```sh
$ enb make
-
Check the result.
After the build, the
dist
directory is created with platform-specific project deliveries. A directory is created for each platform that containscss
andjs
, along with the service files..enb/ common.blocks/ desktop.blocks/ touch.blocks/ touch-phone.blocks/ touch-pad.blocks/ dist/ ├── desktop/ ... ├── desktop.css └── desktop.js ├── touch-phone/ ... ├── touch-phone.css └── touch-phone.js └── touch-pad/ ... ├── touch-pad.css └── touch-pad.js
You can build other necessary bundles in the same way, such as bundles of templates.