gulp-bem with tasks

gulpfile.js

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'))