diff --git a/example/Hello.vue b/example/Hello.vue new file mode 100644 index 0000000..e920f7e --- /dev/null +++ b/example/Hello.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..4a8ba8a --- /dev/null +++ b/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 +``` diff --git a/example/build.js b/example/build.js new file mode 100644 index 0000000..46e8f15 --- /dev/null +++ b/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' +} diff --git a/example/dist/.gitkeep b/example/dist/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/example/index.js b/example/index.js new file mode 100644 index 0000000..fbf4296 --- /dev/null +++ b/example/index.js @@ -0,0 +1,3 @@ +import Hello from './Hello.vue' + +export default Hello diff --git a/package.json b/package.json index 07109e2..fbcd65b 100644 --- a/package.json +++ b/package.json @@ -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" } }