@mongodb-js/mongodb-ui-components/gulpfile.js

A collection of frequently used functional UI components found on mongodb.com

'use strict'

const ENV = process.env.NODE_ENV
const production = (ENV !== 'development')

const browserify = require('browserify')
const watchify = require('watchify')
const source = require('vinyl-source-stream')
const buffer = require('vinyl-buffer')
const gulp = require('gulp')
const gulpif = require('gulp-if')
const insert = require('gulp-insert')
const uglify = require('gulp-uglify')
const stylus = require('gulp-stylus')
const autoprefixer = require('autoprefixer-stylus')
const nib = require('nib')

const bundlerOptions = Object.assign({
  fast: true,
  debug: !production,
  extensions: ['.jsx']
}, production ? {} : {
  cache: {},
  packageCache: {},
  plugin: [watchify]
})

function bundle (b, name) {
  return b.bundle()
    .on('error', function (err) {
      console.error('Browserify Error: ', err.message)
      this.emit('end')
    })
    .pipe(source(`${name}.js`))
    .pipe(gulpif(production, buffer()))
    .pipe(gulpif(production, uglify()))
    .pipe(gulp.dest(`${__dirname}/public`))
}

gulp.task('build', ['nav', 'css'])

gulp.task('dev', ['nav', 'watch-css'])

gulp.task('nav', () => {
  const b = browserify(bundlerOptions)
  b.transform('babelify')

  b.on('log', data => {
    const str = data.split(' ')
    str[0] = (str[0] * Math.pow(10, -3)).toFixed(2)
    str[1] = 'kb'
    console.log(`Bundle created for nav:`, str.join(' '))
  })

  b.on('update', data => bundle(b, 'index'))
  b.require(`${__dirname}/components/nav`, {
    expose: 'MONGODB_NAV'
  })
  b.add(`${__dirname}/components/nav/components/standalone`)

  return bundle(b, 'index')
})

gulp.task('watch-css', ['css'], () => {
  gulp.watch(`${__dirname}/components/nav/styl/**/*.styl`, ['css'])
})

gulp.task('css', () => {
  gulp.src(`${__dirname}/components/nav/styl/index.styl`)
    .pipe(insert.prepend(`
      flex-version = flex
      support-for-ie = false
      vendor-prefixes = official
    `))
    .pipe(stylus({
      use: [
        autoprefixer('iOS > 7', 'last 1 Chrome version', 'ie > 8', 'safari > 9'),
        nib()
      ],
      import: ['nib', `${__dirname}/components/nav/styl/vars.styl`],
      'include css': true,
      compress: production
    }).on('error', function (err) {
      console.log(err.message)
      this.emit('end')
    }))
    .pipe(gulp.dest(`${__dirname}/public`))
})