Фрагменты gulpfile для BEM - сохраняю, дабы вернуться к ним после изучения скринкаста по GUlp

Здесь я нахожу разные юзаю bem, нахожу разные варианты gulpfile для BEM (gulp-bem, gulp-bem-debug), нахожу, как задавать переменные окружния в консоли

bem gulp github search
@bem/gulp updated: may 2016
gulp-bem updated: 7 month ago
gulp-bem-debug
Библиотека 50 вебинаров по BEM из архивов Яндекска
gulp-usebem Parse BEM block classes in HTML files to add style or script references. Inspired by the gulp plugin gulp-useref. Like gulp-useref this plugin only concatenate files but not optimize their.

Зря я пренебрегал возможностью задавать переменные окружения в пространстуе имен консоли... Пришло время активно использовать эту фичу

In [ ]:

git clone https://github.com/bemdesign/bemdesign-bloc --branch master bemdesign
cd bemdesign
npm i     

Чтобы не указывать путь к исполняемому файлу (node_modules/.bin/enb) используем:

In [ ]:

export PATH=./node_modules/.bin:$PATH
# or
SET PATH=%PATH%;%cd%\node_modules\.bin   #for windows  

In [ ]:

###Теперь запустим BEM из консоли Windows

In [ ]:

F:\stradorusite\bem_yandex\bemdesign\bemdesign>SET PATH=%PATH%;%cd%\node_modules\.bin

F:\stradorusite\bem_yandex\bemdesign\bemdesign>bem
Type '--help' for help, press ctrl+d or ctrl+c to exit
> --help
--help
(node) child_process: options.customFds option is deprecated. Use options.stdio instead.
Tools to work with files written using the BEM-method.
See http://bem.github.com/bem-method/ for more info.

Usage:
  bem COMMAND [OPTIONS] [ARGS]
  bem [OPTIONS] [ARGS]

Commands:
  decl : Usage declaration manipulation tool.
  build : Build tool.
  create : Create of entities tool.
  make : BEM make.
  server : Development server.
  bench : Benchmarks
  completion : Shell completion

Options:
  -h, --help : Help
  -v, --version : Show version

>

In [ ]:

####[@bem/gulp](https://github.com/gulp-bem/gulp-bem)

In [ ]:

import gulp from 'gulp';
import bem from '@bem/gulp';
import concat from 'gulp-concat';
import merge from 'gulp-merge';
import bemhtml from 'gulp-bemhtml';
import stylus from 'gulp-stylus';
import postcss from 'gulp-postcss';
import postcssUrl from 'postcss-url';

// Создаём хелпер для сборки проекта
var project = bem({
    bemconfig: {
        'libs/bem-core/common.blocks': { scheme: 'nested' },
        'libs/bem-core/desktop.blocks': { scheme: 'nested' },
        'libs/bem-components/common.blocks': { scheme: 'nested' },
        'libs/bem-components/desktop.blocks': { scheme: 'nested' },
        'libs/bem-components/design/common.blocks': { scheme: 'nested' },
        'libs/bem-components/design/desktop.blocks': { scheme: 'nested' },
        'common.blocks': { scheme: 'nested' },
        'desktop.blocks': { scheme: 'nested' }
    }
});

// Создаём хелпер для сборки бандла
var bundle = project.bundle({
    path: 'desktop.bundles/index',
    declPath: 'index.bemdecl.js'
});

gulp.task('css', function () {
    return bundle.src({tech: 'css', extensions: ['.css', '.styl']})
        .pipe(stylus())            
        .pipe(postcss([
            postcssUrl({ url: 'inline' })            
        ]))
        .pipe(concat(`${bundle.name()}.css`))
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('js', function () {
    return merge(
        gulp.src(require.resolve('ym')),
        bundle.src({ tech: 'js', extensions: ['.js', '.vanilla.js', '.browser.js'] })
    )
    .pipe(concat(`${bundle.name()}.js`))
    .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('bemhtml', function () {
    return bundle.src({ tech: 'bemhtml.js', extensions: ['.bemhtml.js', '.bemhtml'] })
        .pipe(concat(`${bundle.name()}.bemhtml.js`))            
        .pipe(bemhtml())
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('build', gulp.series('css', 'js', 'bemhtml'));
gulp.task('default', gulp.series('build'));   

In [ ]:

####[gulp-bem](https://github.com/floatdrop/gulp-bem) updated: 7 month ago

In [ ]:

#Building CSS for BEM project:

var gulp    = require('gulp');
var bem     = require('gulp-bem');
var concat  = require('gulp-concat');

var levels = ['base', 'blocks'];
var tree = bem(levels);

tree.deps('blocks/page')
    .pipe(bem.src('{bem}.css'))
    .pipe(concat('index.css'))
    .pipe(gulp.dest('./dist'));

In [ ]:

####[gulp-bem-debug](https://github.com/floatdrop/gulp-bem-debug)

In [ ]:

var gulp = require('gulp');
var bem = require('gulp-bem');
var debug = require('gulp-bem-debug');
var concat = require('gulp-concat');

var levels = [ 'desktop.blocks', 'desktop.bundles/index' ];

gulp.task('build', function () {
    var tree = bem.objects(levels).pipe(bem.tree());
    var deps = tree.deps('desktop.bundles/index/sepulka');

    deps.pipe(debug());

    return deps.src('{bem}.css')
        .pipe(concat('index.css'))
        .pipe(gulp.dest('./dist'));
});

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