Друзья, всем приветы. Пытаюсь собрать merged bundle по инструкции https://github.com/enb-bem/enb-bem-techs/blob/master/docs/build-merged-bundle.md В БЭМ новичок, поэтому тяжело пока понять что к чему. Но проект не собирается. Есть предложение включить сборку merged по дефолту в project-stub, чтобы такие коряги как я разобрались )
Вот мой make.js
var techs = { // essential fileProvider: require('enb/techs/file-provider'), fileMerge: require('enb/techs/file-merge'),
// optimization
borschik: require('enb-borschik/techs/borschik'),
// css
stylus: require('enb-stylus/techs/stylus'),
// js
browserJs: require('enb-diverse-js/techs/browser-js'),
prependYm: require('enb-modules/techs/prepend-modules'),
// bemtree
// bemtree: require('enb-bemxjst/techs/bemtree'),
// bemhtml
bemhtml: require('enb-bemxjst/techs/bemhtml'),
bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html')
},
enbBemTechs = require('enb-bem-techs'),
path = require('path'),
fs = require('fs'),
provide = require('enb/techs/file-provider'),
platforms = ['desktop'],
levels = [
{ path: 'libs/bem-core/common.blocks', check: false },
{ path: 'libs/bem-core/desktop.blocks', check: false },
{ path: 'libs/bem-components/common.blocks', check: false },
{ path: 'libs/bem-components/desktop.blocks', check: false },
{ path: 'libs/bem-components/design/common.blocks', check: false },
{ path: 'libs/bem-components/design/desktop.blocks', check: false },
'common.blocks',
'desktop.blocks'
];
module.exports = function(config) { var isProd = process.env.YENV === 'production';
// Создаем директории для merged-бандлов (1)
platforms.forEach(function (platform) {
var node = path.join(platform + '.bundles', 'merged');
if (!fs.existsSync(node)) {
fs.mkdirSync(node);
}
});
config.nodes('*.bundles/*', function(nodeConfig) {
var node = path.basename(nodeConfig.getPath());
if (node !== 'merged') {
nodeConfig.addTechs([
// essential
[enbBemTechs.levels, { levels: levels }],
[techs.fileProvider, { target: '?.bemjson.js' }],
[enbBemTechs.bemjsonToBemdecl],
[enbBemTechs.deps],
[enbBemTechs.files],
// css
[techs.stylus, {
target: '?.css',
autoprefixer: {
browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
}
}],
// bemtree
// [techs.bemtree, { devMode: process.env.BEMTREE_ENV === 'development' }],
// bemhtml
[techs.bemhtml, { devMode: process.env.BEMHTML_ENV === 'development' }],
// html
[techs.bemjsonToHtml],
// client bemhtml
[enbBemTechs.depsByTechToBemdecl, {
target: '?.bemhtml.bemdecl.js',
sourceTech: 'js',
destTech: 'bemhtml'
}],
[enbBemTechs.deps, {
target: '?.bemhtml.deps.js',
bemdeclFile: '?.bemhtml.bemdecl.js'
}],
[enbBemTechs.files, {
depsFile: '?.bemhtml.deps.js',
filesTarget: '?.bemhtml.files',
dirsTarget: '?.bemhtml.dirs'
}],
[techs.bemhtml, {
target: '?.browser.bemhtml.js',
filesTarget: '?.bemhtml.files',
devMode: process.env.BEMHTML_ENV === 'development'
}],
// js
[techs.browserJs],
[techs.fileMerge, {
target: '?.pre.js',
sources: ['?.browser.bemhtml.js', '?.browser.js']
}],
[techs.prependYm, { source: '?.pre.js' }],
// borschik
[techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
[techs.borschik, { source: '?.css', target: '?.min.css', tech: 'cleancss', minify: isProd }]
]);
}
nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
});
config.nodes('*.bundles/merged', function(nodeConfig) {
var dir = path.dirname(nodeConfig.getPath()),
bundles = fs.readdirSync(dir),
bemdeclFiles = []
// Копируем BEMDECL-файлы в merged-бандл (3)
bundles.forEach(function (bundle) {
if (bundle === 'merged') return;
var node = path.join(dir, bundle),
target = bundle + '.bemdecl.js';
nodeConfig.addTechs([techs.provideBemdecl, {
node: node,
target: target
}]);
bemdeclFiles.push(target);
});
// Объединяем скопированные BEMDECL-файлы (4)
nodeConfig.addTechs([techs.mergeBemdecl, { sources: bemdeclFiles }]);
nodeConfig.addTechs([
// essential
[enbBemTechs.levels, { levels: levels }],
[techs.fileProvider, { target: '?.bemjson.js' }],
[enbBemTechs.bemjsonToBemdecl],
[enbBemTechs.deps],
[enbBemTechs.files],
// css
[techs.stylus, {
target: '?.css',
autoprefixer: {
browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
}
}],
// bemtree
// [techs.bemtree, { devMode: process.env.BEMTREE_ENV === 'development' }],
// bemhtml
[techs.bemhtml, { devMode: process.env.BEMHTML_ENV === 'development' }],
// html
// [techs.bemjsonToHtml],
// client bemhtml
[enbBemTechs.depsByTechToBemdecl, {
target: '?.bemhtml.bemdecl.js',
sourceTech: 'js',
destTech: 'bemhtml'
}],
[enbBemTechs.deps, {
target: '?.bemhtml.deps.js',
bemdeclFile: '?.bemhtml.bemdecl.js'
}],
[enbBemTechs.files, {
depsFile: '?.bemhtml.deps.js',
filesTarget: '?.bemhtml.files',
dirsTarget: '?.bemhtml.dirs'
}],
[techs.bemhtml, {
target: '?.browser.bemhtml.js',
filesTarget: '?.bemhtml.files',
devMode: process.env.BEMHTML_ENV === 'development'
}],
// js
[techs.browserJs],
[techs.fileMerge, {
target: '?.pre.js',
sources: ['?.browser.bemhtml.js', '?.browser.js']
}],
[techs.prependYm, { source: '?.pre.js' }],
// borschik
[techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
[techs.borschik, { source: '?.css', target: '?.min.css', tech: 'cleancss', minify: isProd }]
]);
nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
});
};
@nejtr0n Привет! Я обновил ветку merged в
project-stub
. Можно стартовать прямо с нее, либо посмотреть на дифф, чтобы понять, как сконфигурить сборку самостоятельно.git clone -b merged https://github.com/bem/project-stub.git magdar && cd magdar npm install enb make
TypeError: Object [object Object] has no method 'getSharedResources' at null. (/home/webadmin/magdar/node_modules/enb-borschik/techs/borschik.js:87:34)
at resultTechMethods._getBuildResult (/home/webadmin/magdar/node_modules/enb/lib/build-flow.js:605:34)
at /home/webadmin/magdar/node_modules/enb/lib/build-flow.js:667:67
at Array.4 (/home/webadmin/magdar/node_modules/enb/node_modules/vow/lib/vow.js:202:56)
at Object.callFns as _onImmediate
at processImmediate as _immediateCallback
node_modules/.bin/enb make - Так работает! Спасибо огромное )
Значит, в системе глобально установлена устаревшая версия ENB. Её стоит снести и добавить себе в автозагрузку (например, в
~/.bashrc
) вот такой хак, чтобы не писать полный путь руками:export PATH=./node_modules/.bin:$PATH
@tadatuta а можешь ткнуть где почитать как получить из merged бандла
common.css
//bem-core, bem-blockspage1.css
// блоки которые есть только в page1page2.css
// блоки только которые есть в age2Спасибо
@JiLiZART нужно собирать отдельные бандлы с разным набором уровней. Т.е. будет N таких массивов и нужно задекларировать N сборок, отличающихся только переданным набором уровней (https://github.com/bem/project-stub/blob/bem-core/.enb/make.js#L40).
@tadatuta Т.е для каждой страницы нужно будет блоки складывать например в
desktop.bundles/page1/common.blocks
desktop.bundles/page2/common.blocks
Текущая конфигурация
project-stub
поддерживает возможность класть в папку бандла уровеньblocks
(именно в таком написании, без разделения на common/desktop, т.к. это разделение предполагается выше: desktop.bundles).По смыслу получится, что на выходе будут
desktop.bundles/merged/merged.*
, собранные с уровнейbem-core
иbem-components
и самые обычные бандлы для страниц, собранные с участием уровней только этих самых страниц.@tadatuta Круто! Спасибо!