Skip to content

Instantly share code, notes, and snippets.

@belozer
Created November 23, 2016 21:08
Show Gist options
  • Save belozer/7756be54c0bac767be8d71a0533a0b99 to your computer and use it in GitHub Desktop.
Save belozer/7756be54c0bac767be8d71a0533a0b99 to your computer and use it in GitHub Desktop.
gulp-bem with tasks
const gulp = require('gulp')
const Builder = require('gulp-bem-bundle-builder')
const bundler = require('gulp-bem-bundler-fs')
const merge = require('merge2')
const debug = require('gulp-debug')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const gulpif = require('gulp-if')
const concat = require('gulp-concat')
const spawn = require('child_process').spawn
const env = process.env.NODE_ENV
let node
const JS_SERVER_BIN_FILE = './server.js'
const JS_SERVER_SOURCE = ['env', 'app', 'bootstrap', 'config']
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/@common/',
'bem/@desktop/'
],
techMap: {
bemtree: ['bemtree.js'],
bemhtml: ['bemhtml.js'],
js: ['js', 'vanilla.js', 'source.js', 'browser.js'],
css: ['styl', 'css', 'post.css']
}
})
// Сборрка серверного шаблона (возможно стоит объединить таск с клиентом)
gulp.task('build:server', () => {
return bundler('bem/bundles/*')
.pipe(builder({
// server BEMTREE
bemtree: bundle =>
require('gulp-bem-preset-bemtree')(bundle)
.pipe(gulp.dest('./bem/server/'))
.pipe(debug({title: 'server bemtree'})),
// server BEMHTML
bemhtml: bundle =>
require('gulp-bem-preset-bemhtml')(bundle)
.pipe(gulp.dest('./bem/server/'))
.pipe(debug({title: 'server bemhtml'}))
}))
.on('error', console.error)
})
// Сборка стилей
gulp.task('build:css', () => {
return bundler('bem/bundles/*')
.pipe(builder({ css: bundle =>
require('gulp-bem-preset-css')(bundle, {svgPaths: ['bem/icons']})
}))
.on('error', console.error)
.pipe(gulp.dest('./public/bundles/'))
.pipe(debug({title: 'public bundles'}))
})
// Сборка клиентского JS
gulp.task('build:browserjs', () => {
return bundler('bem/bundles/*')
.pipe(builder({
// client JS, BEMTREE, BEMHTML
js: bundle => merge(
require('gulp-bem-preset-browserjs')(bundle, {includePaths: ['bem']}),
require('gulp-bem-preset-bemtree')(bundle, {ym: true}),
require('gulp-bem-preset-bemhtml')(bundle, {ym: true, engine: {elemJsInstances: true}})
)
.pipe(gulpif(env === 'production', babel({ presets: ['es2015'], compact: false })))
.pipe(gulpif(env === 'production', uglify()))
.pipe(concat(bundle.name + '.min.js'))
}))
.on('error', console.error)
.pipe(gulp.dest('./public/bundles/'))
.pipe(debug({title: 'public bundles'}))
})
gulp.task('build', gulp.parallel('build:css', 'build:browserjs', 'build:server'))
gulp.task('server', done => {
if (node) node.kill()
node = spawn('node', [JS_SERVER_BIN_FILE], {stdio: 'inherit'})
node.on('close', code => {
if (code === 8) {
console.log('Error detected, waiting for changes...')
}
})
done()
})
// Вотчеры
gulp.task('watch', done => {
gulp.watch(['bem/@*/**/*.{css,styl,post.css}'], gulp.series('build:css'))
gulp.watch(['bem/@*/**/*.js'], gulp.series('build:browserjs'))
// gulp.watch(['bem/@*/**'], gulp.series('build', 'server'))
gulp.watch(JS_SERVER_SOURCE, gulp.series('server'))
done()
})
process.on('exit', () => {
if (node) node.kill()
})
gulp.task('default', gulp.series('build', 'server', 'watch'))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment