❤
npm
Sign UpSign In

gulp-bem-css

1.1.3 • Public • Published

gulp-bem-css

gulp-bem-css - Gulp plug-in for automatically creating folders and stylesheet files for bem-blocks from html-code

Install

$ npm install --save-dev gulp-bem-css

Usage

const gulp = require('gulp');
const gulpBemCss = require('gulp-bem-css');
 
gulp.task('html', () => {
  return gulp.src('html/*.html')
    .pipe(gulpBemCss())
    .pipe(gulp.dest('dist'));
});

Default this plugin created directories and stylesheet files in 'src/blocks' directory of your project.

Configure

gulp.task('html', () => {
  return gulp.src('html/*.html')
    .pipe(gulpBemCss({
      folder: 'src/blocks', // Path for creating directories and stylesheet files.
      extension: 'css', // Extension of stylesheet files
      elementSeparator: '__', // Element separator in class names
      modifierSeparator: '--' // Modifier separator in class names
    }))
    .pipe(gulp.dest('dist'));
});

How it works

This plugin parse html file and automatically created file structure in accordance with the BEM-methodology of naming CSS classes

example.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div class="block block--modifier">
    <div class="block__element block__element--modifier"></div>
  </div>
</body>
</html>

Plugin generate this file structure

src/
    blocks/
            block/
                  block.css

block.css

.block {
 
}
 
.block--modifier {
 
}
 
.block__element {
 
}
 
.block__element--modifier {
 
}
 

Dependents (0)

Package Sidebar

Install

npm i gulp-bem-css

Repository

github.com/gruzdkow/gulp-bem-css

Homepage

github.com/gruzdkow/gulp-bem-css#readme

Weekly Downloads

1

Version

1.1.3

License

MIT

Last publish

Collaborators

  • gruzdkov
Try on RunKit
Report malware