Add example (#19)

Author: posva

example/Hello.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="hello">
+    <h1 class="hello__title">{{ msg }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello World!'
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.hello {
+  &__title {
+    color: #42b983;
+  }
+}
+</style>

example/README.md

@@ -0,0 +1,12 @@
+Simple example
+===
+
+Example bundling an UMD package with one `vue` file and exporting stylus and CSS (both minified and unminified) to different files.
+
+## Building
+
+```
+cd example
+node build.js
+ls dist
+```

example/build.js

@@ -0,0 +1,68 @@
+const rollup = require('rollup').rollup
+const vue = require('../dist/rollup-plugin-vue.common.js')
+const buble = require('rollup-plugin-buble')
+const uglify = require('uglify-js')
+const CleanCSS = require('clean-css')
+const fs = require('fs')
+const stylus = require('stylus')
+
+
+rollup({
+  entry: 'index.js',
+  plugins: [
+    vue({
+      compileTemplate: true,
+      css (styles, stylesNodes) {
+        write('dist/papervue.styl', styles)
+        stylus.render(styles, function (err, css) {
+          if (err) throw err
+          write('dist/papervue.css', css)
+          write('dist/papervue.min.css', new CleanCSS().minify(css).styles)
+        })
+      }
+    }),
+    buble()
+  ]
+})
+  .then(function (bundle) {
+    var code = bundle.generate({
+      format: 'umd',
+      moduleName: 'helloRollupVue',
+      useStrict: false
+    }).code
+    return write('dist/papervue.js', code).then(function () {
+      return code
+    })
+  })
+  .then(function (code) {
+    var minified = uglify.minify(code, {
+      fromString: true,
+      output: {
+        ascii_only: true
+      }
+    }).code
+    return write('dist/papervue.min.js', minified)
+  })
+  .catch(logError)
+
+function write (dest, code) {
+  return new Promise(function (resolve, reject) {
+    fs.writeFile(dest, code, function (err) {
+      if (err) return reject(err)
+      console.log(blue(dest) + ' ' + getSize(code))
+      resolve()
+    })
+  })
+}
+
+function getSize (code) {
+  return (code.length / 1024).toFixed(2) + 'kb'
+}
+
+function logError (e) {
+  console.log(e)
+}
+
+function blue (str) {
+  return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
+}

example/dist/.gitkeep

@@ -0,0 +1,3 @@
+import Hello from './Hello.vue'
+
+export default Hello

example/index.js

@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "babel-eslint": "^6.1.2",
+    "clean-css": "^3.4.19",
     "coveralls": "^2.11.6",
     "eslint": "^3.3.1",
     "eslint-config-airbnb": "^10.0.1",
@@ -53,6 +54,8 @@
     "rollup": "latest",
     "rollup-plugin-buble": "^0.13.0",
     "rollup-plugin-replace": "latest",
+    "stylus": "^0.54.5",
+    "uglify-js": "^2.7.3",
     "vue-hot-reload-api": "^1.2.2"
   }
 }