Войти с помощью github
Форум /

По просьбе в твиттере от @life_maniac.

Те, кто используют наши шаблонизаторы BEMHTML или BH для верстки статики, часто спрашивают, как отключить минимизацию получаемого HTML.

Но не многие знают, что на самом деле никакой минимизации не происходит.

Почему? Потому что шаблонизаторы изначально генерируют из BEMJSON оптимальный для продакшена HTML.

Если вам необходимо получать красиво отформатированный HTML, подойдет любой pritty-print, например, js-beautify.

Его можно звать через CLI (js-beautify --html) либо встроить прямо в технологию сборки через JS API.

Приведу примеры такой технологии для bem-tools и ENB (технология написана исходя из предположения, что вы используете project-stub).

bem-tools

var BEM = require('bem'),
    Q = BEM.require('q'),
    environ = require('bem-environ'),
    join = require('path').join,
    BEMBL_TECHS = environ.getLibPath('bem-bl', 'blocks-common/i-bem/bem/techs'),

    beautify = require('js-beautify').html;

exports.baseTechPath = join(BEMBL_TECHS, 'html.js');

exports.techMixin = {
    getCreateResult: function(path, suffix, vars) {
        // не вызывать js-beautify в production-режиме
        if (process.env.YENV === 'production') return this.__base.apply(this, arguments);

        return this.__base.apply(this, arguments)
            .then(function(html) {
                return beautify(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });
            });
    }
};

ENB

Для ENB приводить полный листинг не буду. Все сводится к полному копипасту html-from-bemjson.js с добавлением вызова бьютифаера на 40 строке:

var html = bemhtml.BEMHTML.apply(json);

return process.env.YENV === 'production' ? html : require('js-beautify').html(html, { /* см. доступные опции https://www.npmjs.com/package/js-beautify#options */ });

Использование

Когда технологии готовы, останется лишь заменить путь к технологии в конфиге сборки:

PS: Не забываем установить сам модуль: npm i js-beautify --save.