gulp-usebem
Parse BEM blocks in HTML files.
Last updated 4 years ago by sergey-trotsyuk .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gulp-usebem 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.1.1                                ...           latest (4 years ago)

2 Versions

  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (5)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |