Последнее видео с фронтед-субботника 2016 Яндекса про BEM

О планах на начало года и промежуточных итогах рассказывается в видео "Новости из мира БЭМ". Здесь и про Gulp (я сюда скопировал версию gulpfile.js, мало ли чего...), и про кастомные библиотеки (bemdesign-blocks, Alfa-Bank Open Source ...), и ссылки на гитхаб эксперименты типа bootstrap-bl (4-х летней давности)

Новости из мира БЭМ Я.Субботник по фронтенду·27 февраля 2016
Vladimir Grinenko - На субботнике он говорил про
bem-bemtree-static-project-stub
bem-project-stub-he Use gulp watcher to rebuild data by model

Хакатон: сборка с помощью gulp - "использовать не ENB, а Gulp" Основная мысль, которая преследует меня уже долгое время — возможность сборки БЭМ-проектов с помощью любого инструмента. - навязчивая мысль?
project-stub/tree/preparing-for-master - project-stub ветка с Gulp

Alfa-Bank Open Source
ui/common.blocks/ Alfa-Bank UI components
OopscurityArtyom Kravchenko

Artyom Kravchenko Front End Developer True quality in the website devel
bemdesign/bemdesign-blocks
BEM Design The main idea of BEM methodology is to speed development process up and ease the teamwork of developers.
Join Веб-стандарты on Slack.

Sessions Frontend United 2016
bootstrap-bl

bem-bemtree-static-project-stub/gulpfile.js¶

In [ ]:

var fs = require('fs'),
    path = require('path'),
    gulp = require('gulp'),
    del = require('del'),
    mkdirp = require('mkdirp'),
    enb = require('enb'),
    dropRequireCache = require('enb/lib/fs/drop-require-cache'),

    bundleName = 'index',
    pathToBundle = path.join('desktop.bundles', bundleName),
    bemtreeFilename = path.resolve(pathToBundle, bundleName + '.bemtree.js'),
    bemhtmlFilename = path.resolve(pathToBundle, bundleName + '.bemhtml.js'),
    modelFilename = path.resolve('data', 'data.js'),
    outputFolder = 'output';

gulp.task('make', function() {
    return enb.make();
});

gulp.task('static', function() {
    return gulp
        .src('desktop.bundles/index/*.min.*')
        .pipe(gulp.dest(outputFolder));
});

gulp.task('generate', function(done) {
    dropRequireCache(require, bemtreeFilename);
    dropRequireCache(require, bemhtmlFilename);
    dropRequireCache(require, modelFilename);

    var model = require(modelFilename),
        BEMTREE = require(bemtreeFilename).BEMTREE,
        BEMHTML = require(bemhtmlFilename).BEMHTML;

    model.forEach(function(page) {
        var pageFolder = path.join(outputFolder, page.url);
        mkdirp.sync(pageFolder);
        fs.writeFileSync(path.join(pageFolder, 'index.html'), BEMHTML.apply(BEMTREE.apply({
            block: 'root',
            data: page
        })));
    });

    done();
});

gulp.task('watch', function() {
    gulp.watch('data/*', gulp.series('static', 'generate'));
    gulp.watch('common.blocks/**', gulp.series('default'));
});

gulp.task('clean', function() {
    return del(outputFolder);
})

gulp.task('default', gulp.series('make', 'static', 'generate', 'watch'));

Данные задаются в modelFilename = path.resolve('data', 'data.js')

bem-bemtree-static-project-stub/data/data.js¶

In [ ]:

module.exports = [
    {
        title: 'First page',
        url: 'one',
        content: 'hello'
    },
    {
        title: 'Second page',
        url: 'two',
        type: 'info',
        content: 'some more content'
    }
];

Посты чуть ниже также могут вас заинтересовать