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:

• Get the list of source files to include in the build (for css and js)

  To do this, you will need to:

  a. Scan the levels and find all the BEM entities in the project.

  b. Read the BEMJSON file.

  c. Make a list of BEM entities from the BEMJSON file (b).

  d. Complete and sort BEM entities (c) based on dependencies (input.deps.js, button.deps.js and checkbox.deps.js) between them (a).

  e. Get a list of files sorted by the list of BEM entities (c), as well as by the introspection of levels (a).

• Use technologies to build css and js.

• Compile the templates code (BEMHTML or BH) and apply it to the BEMJSON file to get an HTML file.

• Declare targets.

  The ENB config file (.enb/make.js) will look like this:

  // Connect technology models
  var techs = require('enb-bem-techs'),
   provide = require('enb/techs/file-provider'),
   bemhtml = require('enb-bemxjst/techs/bemhtml'), // npm install --save-dev enb-bemxjst
   html = require('enb-bemxjst/techs/bemjson-to-html'),
   css = require('enb-css/techs/css'), // npm install --save-dev enb-css
   js = require('enb-js/techs/browser-js'); // npm install --save-dev enb-js
  

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

• Check the result.

  After the build, the page directory will contain page.css, page.js and page.html files, along with service files.

  .enb/
  blocks/
  page/
  ├── page.bemjson.js
      ...
  ├── page.html
  ├── page.css
  └── page.js