0.1.1 • Published 8 years ago
gulp-usebem v0.1.1
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 = require('gulp');
var gulpUsebem = require('gulp-usebem');
var gulpIf = require('gulp-if');
var gulpIgnore = require('gulp-ignore');
gulp.task('default', function () {
var bemAssets = gulpUsebem.assets({
blockPaths: ['app/blocks'],
exts: ['css', 'js']
});
return gulp.src('app/*.html')
.pipe(bemAssets)
// Add assets to pipe
// Save css files
.pipe(gulpIf(
'*.css',
gulp.dest('dist/styles/bem')
))
// Save js files
.pipe(gulpIf(
'*.js',
gulp.dest('dist/scripts/bem')
))
// Exclude assets with default paths
.pipe(gulpIgnore.exclude('**/*'))
// Restore app/*.html
.pipe(bemAssets.restore())
// Replace markers in HTML
.pipe(gulpUsebem({
cssCommentMarker: 'bem-css',
cssBlockPath: 'styles/bem',
jsCommentMarker: 'bem-js',
jsBlockPath: 'scripts/bem'
}))
.pipe(gulp.dest('dist'));
});
Plugin parses CSS classes and try to find corresponding file:
<!-- app/index.html -->
<html>
<head>
<!-- bem-css -->
</head>
<body class="page">
<header class="page__header"></header>
<main class="page__container"></header>
<footer class="page__footer"></footer>
<!-- bem-js -->
</body>
</html>
CSS class "page" corresponding "app/blocks/page/page.css":
/* app/blocks/page/page.css */
.page {}
.page__header {}
.page__container {}
.page__footer {}
and corresponding "app/blocks/page/page.js":
/* app/blocks/page/page.js */
alert('"page" block JS!');
The resulting HTML would be:
<!-- dist/index.html -->
<html>
<head>
<link href="styles/bem/index.css" rel="stylesheet">
</head>
<body>
<header class="page__header"></header>
<main class="page__container"></header>
<footer class="page__footer"></footer>
<script type="text/javascript" src="scripts/one.js"></script>
</body>
</html>
The resulting CSS would be:
/* dist/styles/bem/index.css */
.page {}
.page__header {}
.page__container {}
.page__footer {}
The resulting JS would be:
/* dist/scripts/bem/index.js */
alert('"page" block JS!');
License
MIT © Sergey Trotsyuk