gulpfile.js

'use strict'
const path = require('path')
const gulp = require('gulp')
const gulpBase64 = require('gulp-base64')
const preprocess = require('gulp-preprocess')
const babel = require('gulp-babel')
const gutil = require('gulp-util')
const compiler = require('vueify').compiler
const stylus = require('stylus')
const gulpStylus = require('gulp-stylus')
const through = require('through2')
const merge2 = require('merge2')
const colors = require('colors')
const pkg = require('./package.json')
const components = require('./examples/components.json')
// const execSync = require('child_process').execSync

colors.setTheme({
  info: 'green',
  warn: 'yellow',
  error: 'red',
  bold: 'bold'
})

const componentList = generateComponentsList(components)
const uncompliedComponentList = [...componentList]
const mixins = [
  path.join(__dirname, './components/_style/mixin/*.styl'),
  path.join(__dirname, './node_modules/nib/lib/nib/vendor'),
  path.join(__dirname, './node_modules/nib/lib/nib/gradients'),
  path.join(__dirname, './node_modules/nib/lib/nib/flex')
]

let succNum = 0
let failNum = 0

function generateComponentsList (components) {
  let list = []
  components.map(nav =>
    nav.list.map(item =>
      list.push(item.path.substr(1))
    )
  )
  return list
}

function compilingComponentLog () {
  return through.obj((file, encode, callback) => {
    if (file.path) {
      const res = file.content ? 0 : -1
      file.path.replace(/lib\/((\S)+)/ig, (s, v) => {
        if (!v) return
        if (res < 0) {
          succNum++
          console.log(`${pkg.name}/lib/${v} ✔`.info)
        } else {
          failNum++
          console.log(`${pkg.name}/lib/${v} ✘ (complie error)`.error)
        }
        uncompliedComponentList.splice(uncompliedComponentList.indexOf(v), 1)
      })
    }
    callback()
  })
}

function compileVueStylus (content, cb, compiler, filePath) {
  stylus(content)
    .import(mixins[0])
    .import(mixins[1])
    .import(mixins[2])
    .import(mixins[3])
    .render((err, css) => {
      if (err) throw err
      cb(null, css)
    })
}

function gulpVueify (options) {
  return through.obj(function (file, encode, callback) {
    if (file.isNull()) {
      return callback(null, file)
    }
    if (file.isStream()) {
      this.emit('error', new gutil.PluginError('gulp-vueify', 'Streams are not supported'))
      return callback()
    }
    if (options) {
      compiler.applyConfig(options)
    }
    const isExactCss = options.isExactCss
    let styleContent = ''
    const styleCb = res => {
      if (res.style) {
        styleContent = res.style
      }
    }
    if (isExactCss) {
      compiler.on('style', styleCb)
    }
    compiler.compile(file.contents.toString(), file.path, (err, result) => {
      if (err) {
        this.emit('error', new gutil.PluginError('gulp-vueify',
          `In file ${path.relative(process.cwd(), file.path)}:\n${err.message}`))
        return callback()
      }
      if (isExactCss) {
        // 仅提取css
        file.path = gutil.replaceExtension(file.path, '.css')
        file.contents = Buffer.from(styleContent)
        compiler.removeListener('style', styleCb)
      } else {
        // js & css 集成至一个文件
        file.path = gutil.replaceExtension(file.path, '.js')
        file.contents = Buffer.from(result)
      }
      callback(null, file)
    })
  })
}

gulp.task('compile', () => {
  const streamCompiledVue = gulp.src('./components/*/*.vue')
          .pipe(gulpVueify({
            extractCSS: true,
            customCompilers: {
              stylus: compileVueStylus
            }
          }))
          .pipe(gulp.dest('./lib'))
          .pipe(compilingComponentLog())

  const streamCompiledCss = gulp.src('./components/*/*.vue')
          .pipe(gulpVueify({
            isExactCss: true,
            customCompilers: {
              stylus: compileVueStylus
            }
          }))
          .pipe(gulpBase64())
          .pipe(gulp.dest('./lib/style'))
  
  const streamCompiledStylus = gulp.src('./components/_style/*.styl')
          .pipe(gulpStylus({
            compress: true,
            import: mixins
          }))
          .pipe(gulp.dest('./lib/style'))

  const streamCompiledJs = gulp.src('./components/**/!(test)/!(component).js')
          .pipe(preprocess({
            context: {
              'NODE_ENV': 'production',
              'MAN_VERSION': `'${pkg.version}' //`
            }}))
          .pipe(babel())
          .pipe(gulp.dest('./lib'))

  return merge2([streamCompiledVue, streamCompiledCss, streamCompiledStylus, streamCompiledJs])
})

gulp.task('build', ['compile'], () => {
  uncompliedComponentList.map(item => {
    failNum++
    console.log(`${pkg.name}/lib/${item} ✘ (not found)`.error)
  })
  console.log(
    `\n${pkg.name}(${pkg.version}) `.warn.bold +
    `build ${componentList.length} components : `.warn.bold +
    `${succNum} successed / ${failNum} failed\n`.warn.bold
  )
})