gulp-bem-project

gulp-bem-project

Gulp plugins for modern BEM projects.

Install

npm install gulp-bem-project --save-dev

Basic Usage

Concatenate BH server templates

Concats BH template files into one. Emits one JS file which exports a function. This function takes BH engine object as the only parameter.

'use strict';

let gulp = require('gulp');
let concatBH = require('gulp-bem-project')['bh-server-concat'];

gulp.task('bh-server', () => {
    gulp
        .src([
            'app/blocks/**/*.bh.js',
            'app/blocks/**/*.bh.server.js'
        ])
        // first argument is result relative file path
        // second argument is base path (optional)
        .pipe(concatBH('combined.bh.js', './relative/path/to/your/app'))
        .pipe(gulp.dest("./"));
});

Get YModule-wrapped BH engine

'use strict';

let gulp = require('gulp');
let clientBHEngine = require('gulp-bem-project')['bh-client-engine'];

gulp.task('bh-client', () => {
    gulp
        .src('node_modules/bh/lib/bh.js')
        // first and only argument is object with dependencies
        // it is optional
        .pipe(clientBHEngine({i18n: 'i18n'}))
        .pipe(gulp.dest("./"));
});

Wrap files' contents into multiline comments with file path

'use strict';

let gulp = require('gulp');
let wrapFilePath = require('gulp-bem-project')['wrap-file-path'];

gulp.task('css', () => {
    gulp
        .src('app/blocks/**/*.css')
        .pipe(wrapFilePath())
        .pipe(concat('all.css'))
        .pipe(gulp.dest('./'));
});

// all.css will contain something like:
/* begin: /home/user/www/project-name/app/blocks/award/award.css */
// ...selectors here...
/* end: /home/user/www/project-name/app/blocks/award/award.css */

/* begin: /home/user/www/project-name/app/blocks/user/user.css */
// ...selectors here...
/* end: /home/user/www/project-name/app/blocks/user/user.css */

/* begin: /home/user/www/project-name/app/blocks/wrapper/wrapper.css */
// ...selectors here...
/* end: /home/user/www/project-name/app/blocks/wrapper/wrapper.css */