EN RU
Forum

Methodology

Technology

Toolbox

Libraries

Tutorials

Building a page

A page is a subtype of a bundle. To build a page, you also need a list of the BEM entities and levels with the source code for the blocks.

To learn how to build a bundle, read Building a bundle.

The main difference is that pages are usually described in BEMJSON format, while BEMDECL is usually received automatically.

Example of a BEMJSON file:

module.exports = {
    block: 'page',
    content: 'Hello BEM!'
};

Example of a page build

Page build in the example project:

.enb/
└── make.js          # The ENB config file
blocks/              # blocks level
├── input/
    ├── input.deps.js
    ├── input.bemhtml
    ├── input.css
    └── input.js
├── button/
    ├── button.deps.js
    ├── button.bemhtml
    ├── button.css
    └── button.js
└── checkbox/
    ├── checkbox.deps.js
    ├── checkbox.bemhtml
    ├── checkbox.css
    └── checkbox.js
page/
└── page.bemjson.js  # page description

To build a page, you need to complete the following steps:

module.exports = function(config) { // Configure the bundle build config.node('page', function(nodeConfig) { // Declare the technology modules // that can take part in building the targets. nodeConfig.addTechs([ // Use basic technologies to get // the list of files to include in the build. [techs.levels, { levels: }], // (1) -> ?.levels , // (2) -> ?.bemjson.js , // (3) -> ?.bemdecl.js , // (4) ?.bemdecl.js -> ?.deps.js , // (5) ?.levels + ?.deps.js -> ?.files

        // Technologies take the list of files as input. The target that stores the list of files
        // is set with the `filesTarget` option (`?.files` by default). The build will
        // use only the files that have suffixes specified with the `sourceSuffixes` option.
        [css],     // The `sourceSuffixes` option is set to `['css']` by default
        [js, { target: '?.js' }],      // The `sourceSuffixes` option is set to  `['vanilla.js', 'js', 'browser.js']` by default
        [bemhtml], // The `sourceSuffixes` option is set to `['bemhtml', 'bemhtml.xjst']` by default.

        // The technology takes the `?.bemjson.js` and `?.bemhtml.js` targets as input.
        [html]
    ]);

    // Declare targets you want to build.
    nodeConfig.addTargets(['?.css', '?.js', '?.html']);
});

};

5. Launch the build in the console:

```sh
$ enb make