Skip to content

Instantly share code, notes, and snippets.

@belozer
Created November 18, 2016 12:25
Show Gist options
  • Save belozer/06b1183bf2a68665375527452ebf5397 to your computer and use it in GitHub Desktop.
Save belozer/06b1183bf2a68665375527452ebf5397 to your computer and use it in GitHub Desktop.
Build BEM project with gulp-bem
// bem/.tmpls/bemhtml.browser.js
var BEMHTML;
(function(global) {
function buildBemXjst(__bem_xjst_libs__) {
var exports = {};
<%= contents %>
return exports;
};
var defineAsGlobal = true;
// Provide with CommonJS
if (typeof module === 'object' && typeof module.exports === 'object') {
exports['BEMHTML'] = buildBemXjst({
}
);
defineAsGlobal = false;
}
// Provide to YModules
if (typeof modules === 'object') {
modules.define(
'BEMHTML',
[],
function(
provide
) {
provide(buildBemXjst({
}
));
}
);
defineAsGlobal = false;
}
// Provide to global scope
if (defineAsGlobal) {
BEMHTML = buildBemXjst({
}
);
global['BEMHTML'] = BEMHTML;
}
})(typeof window !== "undefined" ? window : global || this);
// bem/.tmpls/bemtree.browser.js
var BEMTREE;
(function(global) {
function buildBemXjst(__bem_xjst_libs__) {
var exports = {};
<%= contents %>
return exports;
};
var defineAsGlobal = true;
// Provide with CommonJS
if (typeof module === 'object' && typeof module.exports === 'object') {
exports['BEMTREE'] = buildBemXjst({
}
);
defineAsGlobal = false;
}
// Provide to YModules
if (typeof modules === 'object') {
modules.define(
'BEMTREE',
[],
function(
provide
) {
provide(buildBemXjst({
}
));
}
);
defineAsGlobal = false;
}
// Provide to global scope
if (defineAsGlobal) {
BEMTREE = buildBemXjst({
}
);
global['BEMTREE'] = BEMTREE;
}
})(typeof window !== "undefined" ? window : global || this);
const Builder = require('gulp-bem-bundle-builder');
const bundler = require('gulp-bem-bundler-fs');
const gulp = require('gulp');
const path = require('path');
const postcss = require('gulp-postcss');
const postcssUrl = require('postcss-url');
const autoprefixer = require('autoprefixer');
const debug = require('gulp-debug');
const csso = require('gulp-csso');
const filter = require('through2-filter').obj;
const merge = require('merge2');
const concat = require('gulp-concat');
const stylus = require('gulp-stylus');
const uglify = require('gulp-uglify');
const bemhtml = require('gulp-bem-xjst').bemhtml;
const bemtree = require('gulp-bem-xjst').bemtree;
const toHtml = require('gulp-bem-xjst').toHtml;
const nodemon = require('gulp-nodemon');
const wrap = require('gulp-wrap');
const browserify = require('gulp-browserify');
const sourcemaps = require('gulp-sourcemaps');
const babel = require('gulp-babel');
const gulpif = require('gulp-if');
const include = require('gulp-include');
const env = process.env.NODE_ENV
const builder = Builder({
levels: [
'bem/libs/bem-core/common.blocks',
'bem/libs/bem-core/desktop.blocks',
'bem/libs/bem-components/common.blocks',
'bem/libs/bem-components/desktop.blocks',
'bem/libs/bem-components/design/common.blocks',
'bem/libs/bem-components/design/desktop.blocks',
'bem/libs/bem-forms/common.blocks',
'bem/libs/bem-animations/@common',
'bem/libs/bem-animations/@bem-core-v4',
'bem/blocks/@common/',
'bem/blocks/@desktop/',
],
techMap: {
bemtree: ['bemtree.js'],
bemhtml: ['bemhtml.js'],
js: ['js', 'vanilla.js', 'source.js', 'browser.js'],
css: ['styl', 'css', 'post.css']
}
});
gulp.task('build', () => {
return bundler('bem/bundles/*')
.pipe(builder({
css: bundle =>
bundle.src('css')
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(concat(bundle.name + '.min.css'))
.pipe(postcss([
require('postcss-import')(),
require('postcss-each'),
require('postcss-for'),
require('postcss-calc')(),
require('postcss-nested'),
require('pobem'),
require('postcss-media-minmax')(),
require('postcss-custom-media'),
require('postcss-css-variables')(),
require('lost')(),
require('postcss-svg')({
paths: ['bem/icons'],
defaults: "[fill-opacity]: 1",
svgo: true,
// debug: true
}),
autoprefixer({
browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
})
]))
.pipe(sourcemaps.write())
.pipe(concat(bundle.name + '.min.css')),
// .pipe(csso()),
js: bundle =>
merge(
gulp.src(require.resolve('ym')),
bundle.src('js')
.pipe(filter(f => ~['vanilla.js', 'browser.js', 'js'].indexOf(f.tech))),
bundle.src('js').pipe(filter(f => f.tech === 'source.js'))
.pipe(browserify())
.pipe(wrap({src: './bem/.tmpls/iife.js'})),
bundle.src('bemhtml')
.pipe(concat('browser.bemhtml.js'))
.pipe(bemhtml({elemJsInstances: true}))
.pipe(wrap({src: './bem/.tmpls/bemhtml.browser.js'})),
bundle.src('bemtree')
.pipe(concat('browser.bemtree.js'))
.pipe(bemtree())
.pipe(wrap({src: './bem/.tmpls/bemtree.browser.js'}))
)
.pipe(include({
hardFail: true,
includePaths: [
__dirname + "/bem"
]
}))
.pipe(gulpif(env === 'production', babel({ presets: ['es2015'], compact: false })))
.pipe(gulpif(env === 'production', uglify()))
.pipe(concat(bundle.name + '.min.js')),
bemhtml: bundle =>
bundle.src('bemhtml')
.pipe(concat('any.bemhtml.js'))
.pipe(bemhtml())
.pipe(concat(bundle.name + '.bemhtml.js'))
.pipe(gulp.dest('./bem/server/')),
bemtree: bundle =>
bundle.src('bemtree')
.pipe(concat('any.bemtree.js'))
.pipe(bemtree())
.pipe(concat(bundle.name + '.bemtree.js'))
.pipe(gulp.dest('./bem/server/')),
}))
.on('error', console.error)
.pipe(debug())
.pipe(gulp.dest('./public/bundles/'));
});
// gulp.watch(['bem/blocks/**', '!bem/blocks/**/*.source.js'], gulp.parallel('build'));
// // gulp.task('watch', done => {
// // done();
// // });
//
//
// gulp.task('server', function () {
// return nodemon({
// script: 'server.js'
// , ext: 'js'
// , ignore: [
// '.git',
// 'node_modules/**/node_modules',
// 'bem/bundles/*/*.min.js',
// 'bem/bundles/*/*.bemdecl.js',
// 'bem/bundles/*/*.deps.js',
// 'bem/bundles/*/*.browser*'
// ]
// , watch: ['app', 'bootstrap', 'config', '.env', './bem/server/*.js']
// })
// .on('restart', function () {
// console.log('Server restarted!')
// })
// })
gulp.task('default', gulp.series('build', 'server'));
// bem/.tmpls/iife.js
(function(){
<%= contents %>
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment