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.
Install
Install with npm
npm install --save-dev gulp-usebem
Usage
The following example will parse the BEM block classes in the HTML and replace special markers to references. Founded BEM files will be concatenated and passed through in a stream as well. Use gulp-if for optimize or save asstes. Use gulp-ignore for ignore default asset paths.
var gulp = ;var gulpUsebem = ;var gulpIf = ;var gulpIgnore = ; gulp;
Plugin parses CSS classes and try to find corresponding file:
<!-- app/index.html --> <!-- bem-css --> <!-- bem-js -->
CSS class "page" corresponding "app/blocks/page/page.css":
/* app/blocks/page/page.css */
and corresponding "app/blocks/page/page.js":
/* app/blocks/page/page.js */ ;
The resulting HTML would be:
<!-- dist/index.html -->
The resulting CSS would be:
/* dist/styles/bem/index.css */
The resulting JS would be:
/* dist/scripts/bem/index.js */ ;
License
MIT © Sergey Trotsyuk