jc-biz-components/scripts/compile.js

jc component library based on Antd

const path = require('path')
const gulp = require('gulp')
const through2 = require('through2')
const rimraf = require('rimraf')
const merge2 = require('merge2')
const babel = require('gulp-babel')
const transformLess = require('antd-tools/lib/transformLess')
const getBabelCommonConfig = require('antd-tools/lib/getBabelCommonConfig')

const cwd = process.cwd()
const libDir = path.join(cwd, 'lib')

function addFilePathPrefix(file) {
  file.path = file.path.replace(/\/components\/([^\/]+)\//, function (all, letter) {
    return letter === 'style' ? '/components/' + letter + '/' : '/components/jc-' + letter + '/'
  })
}

function compile() {
  rimraf.sync(libDir)
  const less = gulp
    .src(['components/**/*.less'])
    .pipe(
      through2.obj(function (file, encoding, next) {
        let path = file.path
        addFilePathPrefix(file)
        this.push(file.clone())
        if (
          file.path.match(/\/style\/index\.less$/) ||
          file.path.match(/\/style\/v2-compatible-reset\.less$/)
        ) {
          transformLess(path)
            .then(css => {
              file.contents = Buffer.from(css)
              file.path = file.path.replace(/\.less$/, '.css')
              this.push(file)
              next()
            })
            .catch(e => {
              console.error(e)
            })
        } else {
          next()
        }
      })
    )
    .pipe(gulp.dest(libDir))
  const assets = gulp
    .src(['components/**/*.@(png|svg)'])
    .pipe(gulp.dest(libDir))

  const tsFilesStream = babelify(gulp.src(['components/**/*.js']))
  const antdFilesStream = generateAntdlib()
  return merge2([less, tsFilesStream, assets, antdFilesStream])
}

function toUpper(s1) {
  s1 = s1.replace(/\-(\w)/g, function(all, letter) {
    return letter.toUpperCase()
  })
  if (s1 && s1.length) {
    s1 = s1[0].toUpperCase() + s1.substr(1)
  }
  return s1
}

function generateAntdlib() {
  const babelConfig = getBabelCommonConfig()
  delete babelConfig.cacheDirectory
  babelConfig.plugins.push(require.resolve('babel-plugin-add-module-exports'))

  let stream = gulp.src(['node_modules/antd/lib/**/index.js', 'node_modules/antd/lib/**/css.js', 'node_modules/antd/lib/**/zh_CN.js']).pipe(
    through2.obj(function z(file, encoding, next) {
      if (file.path.indexOf('/lib/style/') >= 0) {
        next()
        return
      }
      let arr = file.path.match(/\/lib\/([^\/]+)(\/style\/|\/)(index|css)\.js/)
      if (arr && arr.length > 3) {
        let content = ''
        if (arr[2] === '/') {
          content = `import ${toUpper(arr[1])} from 'antd/lib/${arr[1]}';\nexport default ${toUpper(arr[1])};\n`
        } else if (arr[3] === 'index') {
          content = `import 'antd/lib/${arr[1]}/style';\n`
        } else {
          content = `import 'antd/lib/${arr[1]}/style/css';\n`
        }
        file.contents = Buffer.from(content)
        this.push(file)
        next()
      } else if (file.path.indexOf('zh_CN') >= 0) {
        let content = `import zhCN from 'antd/lib/locale-provider/zh_CN';\nexport default zhCN;\n`
        file.contents = Buffer.from(content)
        this.push(file)
        next()
      } else {
        next()
      }
    })
  ).pipe(babel(babelConfig))
  return stream.pipe(gulp.dest(libDir))
}

function babelify(js) {
  const babelConfig = getBabelCommonConfig()
  delete babelConfig.cacheDirectory
  babelConfig.plugins.push(require.resolve('babel-plugin-add-module-exports'))

  babelConfig.plugins.push([
    require.resolve('babel-plugin-import'),
    {
      libraryName: 'antd',
      libraryDirectory: 'lib',
      style: true
    }
  ])

  let stream = js.pipe(babel(babelConfig)).pipe(
    through2.obj(function z(file, encoding, next) {
      addFilePathPrefix(file)
      const fc = file.contents.toString(encoding)
      file.contents = Buffer.from(
        fc.replace(/([\'\"]\.\.\/)(\w)/g, function (all, l1, l2) {
          return l1 + 'jc-' + l2
        })
      )

      this.push(file.clone())
      if (file.path.match(/\/style\/index\.js/)) {
        const content = file.contents.toString(encoding)
        if (content.indexOf("react-native'") !== -1) {
          // actually in antd-mobile@2.0, this case will never run,
          // since we both split style/index.mative.js style/index.js
          // but let us keep this check at here
          // in case some of our developer made a file name mistake ==
          next()
          return
        }
        file.contents = Buffer.from(
          content
          .replace(/\/style\/?'/g, "/style/css'")
          .replace(/\.less/g, '.css')
        )
        file.path = file.path.replace(/index\.js/, 'css.js')
        this.push(file)
        next()
      } else {
        next()
      }
    })
  )
  return stream.pipe(gulp.dest(libDir))
}

gulp.task('compile', [], () => {
  compile()
})

gulp.start('compile')