gulp-bem-classes v0.3.2

gulp-bem-classes

It finds and replaces strings like bClass="b('block')('element')" to regular HTML classes. Used the bem-cn formatter inside.

Usage

Install

npm i gulp-bem-classes -D

All in one mode

1. Connect the plugin inside gulpfile.js:

   var bemClasses = require( 'gulp-bem-classes' )
   
   gulp.task( 'templates', function() {
     return gulp.src( './templates/*.html' )
       .pipe( bemClasses() )
       .pipe( gulp.dest( './dist' ) )
   } )

2. Use b_ inside your templates:

   <div bClass="b('block')">
     <div bClass="b('block')('element')">Element</div>
     <div bClass="b('block')('element', {size: 'small'})">Small element</div>
   </div>

   It will be formatted to:

   <div class="block">
     <div class="block__element">Element</div>
     <div class="block__element block__element_size_small">Small element</div>
   </div>

Block per file mode

Example with the gulp-file-include package.

1. Connect the plugin inside gulpfile.js:

   var bemClasses = require( 'gulp-bem-classes' ),
       fileInclude = require( 'gulp-file-include' )
   
   gulp.task( 'blocks', function() {
     return gulp.src( './templates/blocks/*.html' )
       .pipe( bemClasses( { blockPerFile: true } ) )
       .pipe( gulp.dest( './templates/blocks/generated' ) )
   } )
   
   gulp.task( 'templates', function() {
     return gulp.src( './templates/*.html' )
       .pipe( fileInclude( {
         prefix: '@@',
         basepath: './templates/blocks/generated',
         indent: true
       } ) )
       .pipe( bemClasses() )
       .pipe( gulp.dest( './dist' ) )
   } )

2. Use b_ inside your templates (comments are not required):

   <!-- included-block.html -->
   <div bRootClass="b('included-block')">
     <div bClass="b('element')">Element</div>
     <div bClass="b('element', {size: 'small'})">Small element</div>
   </div>
   
   <!-- index.html -->
   <div>
     @@include('included-block.html')
     <div bClass="b('block')({visible: true})">Another element</div>
   </div>

   It will be formatted to:

   <div>
     <div class="included-block">
       <div class="included-block__element">Element</div>
       <div class="included-block__element included-block__element_size_small">Small element</div>
     </div>
     <div class="block block_visible">Another element</div>
   </div>

More info about the bem-cn syntax you can find in the package repo.