[build] build script with rollup, build style with gulp

.babelrc

@@ -1,5 +1,12 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
-  "comments": false
+  "env": {
+    "development": {
+      "presets": ["es2015", "stage-2"],
+      "comments": false
+    },
+    "production": {
+      "presets": ["es2015-rollup"],
+      "comments": false
+    }
+  }
 }

build/build-less.js

@@ -0,0 +1,26 @@
+var gulp = require('gulp')
+var less = require('gulp-less')
+var banner = require('gulp-banner')
+var rename = require('gulp-rename')
+var LessAutoprefix = require('less-plugin-autoprefix')
+
+var autoprefix = new LessAutoprefix({ browsers: ['last 2 versions'] })
+var pkg = require('../package.json')
+var comment =
+  '/*!\n' +
+  ' * Pandora UI v <%= pkg.version %>' + '\n' +
+  ' * (c) ' + new Date().getFullYear() + ' <%= pkg.author %>\n' +
+  ' * Released under the MIT License.\n' +
+  ' */\n'
+
+gulp.task('less', function () {
+  return gulp.src('./src/style/index.less')
+    .pipe(banner(comment, {pkg: pkg}))
+    .pipe(less({
+      plugins: [autoprefix]
+    }))
+    .pipe(rename('pandora-ui.css'))
+    .pipe(gulp.dest('./dist'))
+})
+
+gulp.start('less')

build/build-script.js

@@ -0,0 +1,162 @@
+process.env.BABEL_ENV = 'production'
+
+var fs = require('fs')
+var path = require('path')
+var zlib = require('zlib')
+var rollup = require('rollup')
+var uglify = require('uglify-js')
+var buble = require('rollup-plugin-buble')
+var string = require('rollup-plugin-string')
+var vue = require('rollup-plugin-vue')
+var version = process.env.VERSION || require('../package.json').version
+var banner =
+    '/*!\n' +
+    ' * Pandora UI v' + version + '\n' +
+    ' * (c) ' + new Date().getFullYear() + ' Lynzz\n' +
+    ' * Released under the MIT License.\n' +
+    ' */'
+var vueConfig = {
+  compileTemplate: true,
+  htmlMinifier: {collapseBooleanAttributes: false}
+}
+// var babelConfig = {
+//   exclude: 'node_modules/**'
+// }
+var stringConfig = {
+  include: ['**/*.svg', '**/*.html']
+}
+var external = [
+  'async-validator'
+  // 'moment',
+  // 'velocity-animate'
+]
+var globals = {
+  'async-validator': 'AsyncValidator'
+  // moment: 'moment',
+  // 'velocity-animate': 'Velocity'
+}
+var rollupConfig = {
+  entry: 'src/index.js',
+  plugins: [
+    vue(vueConfig),
+    string(stringConfig),
+    buble()],
+  external: external
+}
+
+var file = fs
+    .readFileSync('src/index.js', 'utf-8')
+    .replace(/version: '[\d\.]+'/, "version: '" + version + "'")
+
+fs.writeFileSync('src/index.js', file)
+
+// CommonJS build.
+rollup
+.rollup(rollupConfig)
+.then(function (bundle) {
+  return write('dist/pandora-ui.common.js', bundle.generate({
+    format: 'cjs',
+    banner: banner,
+    globals: globals,
+    useStrict: false
+  }).code)
+})
+// ES6 Dev Build
+.then(function () {
+  return rollup
+    .rollup({
+      entry: 'src/index.js',
+      plugins: [vue(vueConfig), string(stringConfig)],
+      external: external
+    })
+    .then(function (bundle) {
+      return write('dist/pandora-ui.js', bundle.generate({
+        exports: 'named',
+        banner: banner,
+        globals: globals,
+        useStrict: false
+      }).code)
+    })
+})
+// Standalone Dev Build
+.then(function () {
+  return rollup.rollup(rollupConfig)
+  .then(function (bundle) {
+    return write('dist/pandora-ui.standalone.js', bundle.generate({
+      format: 'umd',
+      banner: banner,
+      moduleName: 'PandoraUI',
+      globals: globals,
+      useStrict: false
+    }).code)
+  })
+})
+// Standalone Production Build
+.then(function () {
+  return rollup.rollup(rollupConfig)
+  .then(function (bundle) {
+    var code, res, map
+
+    code = bundle.generate({
+      format: 'umd',
+      moduleName: 'PandoraUI',
+      banner: banner,
+      globals: globals,
+      useStrict: false
+    }).code
+
+    res = uglify.minify(code, {
+      fromString: true,
+      outSourceMap: 'pandora-ui.standalone.min.js.map',
+      output: {
+        preamble: banner,
+        ascii_only: true
+      }
+    })
+
+    // fix uglifyjs sourcemap
+    map = JSON.parse(res.map)
+    map.sources = ['pandora-ui.standalone.js']
+    map.sourcesContent = [code]
+    map.file = 'pandora-ui.standalone.min.js'
+
+    return [
+      write('dist/pandora-ui.standalone.min.js', res.code),
+      write('dist/pandora-ui.standalone.min.js.map', JSON.stringify(map))
+    ]
+  })
+  .then(zip)
+})
+.catch(function (e) {
+  console.log(e)
+})
+
+function write (dest, code) {
+  return new Promise(function (resolve, reject) {
+    fs.writeFile(dest, code, function (err) {
+      if (err) return reject(err)
+      console.log(blue(path.relative(process.cwd(), dest)) + ' ' + getSize(code))
+      resolve()
+    })
+  })
+}
+
+function zip () {
+  return new Promise(function (resolve, reject) {
+    fs.readFile('dist/pandora-ui.standalone.min.js', function (err, buf) {
+      if (err) return reject(err)
+      zlib.gzip(buf, function (err, buf) {
+        if (err) return reject(err)
+        write('dist/pandora-ui.standalone.min.js.gz', buf).then(resolve)
+      })
+    })
+  })
+}
+
+function getSize (code) {
+  return (code.length / 1024).toFixed(2) + 'kb'
+}
+
+function blue (str) {
+  return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
+}

build/deploy.sh

@@ -0,0 +1,34 @@
+BRANCH=$(git rev-parse --abbrev-ref HEAD)
+if [ "$BRANCH" == "master" ]
+then
+  TAG="latest"
+else
+  TAG="$BRANCH"
+fi
+
+set -e
+echo "Enter release version @$TAG: "
+read VERSION
+
+read -p "Deploy $VERSION@$TAG - are you sure? (y/n)" -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+  echo "Deploying $VERSION@$TAG ..."
+
+  # lint and test
+  npm run lint 2>/dev/null
+
+  # build
+  VERSION=$VERSION npm run build
+
+  # commit
+  git add -A
+  git commit -m "[build] $VERSION"
+  npm version $VERSION --message "[release] $VERSION"
+
+  # publish
+  git push origin refs/tags/v$VERSION
+  git push
+  npm publish --tag=$TAG
+fi

build/webpack.base.conf.js

@@ -32,7 +32,7 @@ module.exports = {
     alias: {
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components')
+      'components': path.resolve(__dirname, '../examples/components')
     }
   },
   resolveLoader: {

examples/app.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+  import '../src/style/index.less'
   export default {
     name: 'app'
   }

examples/docs/tag.md

@@ -3,10 +3,10 @@ module.exports = {
   data() {
     return {
       tags: [
-        {key: 1, name: '成功', type: 'success'},
-        {key: 2, name: '信息', type: 'info'},
-        {key: 3, name: '失败', type: 'danger'},
-        {key: 4, name: '警告', type: 'warning'}
+        {key: 1, name: '绿色', color: 'green'},
+        {key: 2, name: '蓝色', color: 'blue'},
+        {key: 3, name: '红色', color: 'red'},
+        {key: 4, name: '黄色', color: 'yellow'}
       ]
     };
   },
@@ -26,12 +26,11 @@ module.exports = {
 
 ```html
 <p-tag>default</p-tag>
-<p-tag type="primary">primary</p-tag>
-<p-tag type="info">info</p-tag>
-<p-tag type="success">success</p-tag>
-<p-tag type="warning">warning</p-tag>
-<p-tag type="danger">danger</p-tag>
-<p-tag type="dark">dark</p-tag>
+<p-tag color="blue">blue</p-tag>
+<p-tag color="red">red</p-tag>
+<p-tag color="green">green</p-tag>
+<p-tag color="yellow">yellow</p-tag>
+<p-tag color="#108ee9">#108ee9</p-tag>
 ```
 :::
 
@@ -45,7 +44,7 @@ module.exports = {
 <p-tag
   v-for="(tag, index) in tags"
   :key="tag.key"
-  :type="tag.type"
+  :color="tag.color"
   @close="closeTag(index)"
   :closable="true">
   {{tag.name}}
@@ -55,10 +54,10 @@ module.exports = {
   data() {
     return {
       tags: [
-        {key: 1, name: '成功', type: 'success'},
-        {key: 2, name: '信息', type: 'info'},
-        {key: 3, name: '失败', type: 'danger'},
-        {key: 4, name: '警告', type: 'warning'}
+        {key: 1, name: '绿色', color: 'green'},
+        {key: 2, name: '蓝色', color: 'blue'},
+        {key: 3, name: '红色', color: 'red'},
+        {key: 4, name: '黄色', color: 'yellow'}
       ]
     };
   },
@@ -72,21 +71,11 @@ module.exports = {
 ```
 :::
 
-### 大中小标签
-
-:::demo
-
-```html
-<p-tag type="primary" size="large">Large</p-tag>
-<p-tag type="info" size="medium">Medium</p-tag>
-<p-tag type="success" size="small">Small</p-tag>
-```
-:::
 
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | 主题 | string | 'primary', 'dark', 'success', 'warning', 'danger' | — |
+| color | 颜色 | string | 'blue', 'green', 'red', 'yellow' | — |
 | closable | 是否可关闭 | boolean | — | false |
 | close-transition | 是否禁用关闭时的渐变动画 | boolean | — | false |
 

examples/index.js

@@ -6,9 +6,10 @@ import DemoBlock from './components/demo-block'
 import entry from './app'
 import routerConfig from './router-config'
 
-require('../src/index')
+import PandoraUI from '../src/index'
 
 Vue.use(VueRouter)
+Vue.use(PandoraUI)
 Vue.component('nav-view', navView)
 Vue.component('demo-block', DemoBlock)
 

examples/nav.config.json

@@ -59,7 +59,7 @@
         }
       ]
     }, {
-      "groupName": "Data",
+      "groupName": "Data Display",
       "list": [
         {
           "path": "/tag",