1.1.3 • Published 6 years ago
gulp-bem-css v1.1.3
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-cssUsage
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.cssblock.css
.block {
}
.block--modifier {
}
.block__element {
}
.block__element--modifier {
}