From 3d4ffe40667ca8c5218a557283f3715a439c1603 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 13 Jul 2016 02:00:31 -0300 Subject: [PATCH] Ditch gulp in favor of vue-cli --- .eslintignore | 2 + .eslintrc.js | 15 +++ .gitignore | 10 +- README.md | 26 ++++- build/build.js | 35 ++++++ build/dev-client.js | 9 ++ build/dev-server.js | 65 +++++++++++ build/utils.js | 56 ++++++++++ build/webpack.base.conf.js | 85 +++++++++++++++ build/webpack.dev.conf.js | 34 ++++++ build/webpack.prod.conf.js | 102 ++++++++++++++++++ config/dev.env.js | 6 ++ config/index.js | 26 +++++ config/prod.env.js | 3 + config/test.env.js | 6 ++ demo/index.html | 81 -------------- gulpfile.babel.js/config.js | 32 ------ gulpfile.babel.js/index.js | 36 ------- gulpfile.babel.js/tasks/browser-sync.js | 36 ------- gulpfile.babel.js/tasks/browserify.js | 87 --------------- gulpfile.babel.js/tasks/clean.js | 7 -- gulpfile.babel.js/tasks/copy.js | 8 -- gulpfile.babel.js/tasks/eslint.js | 27 ----- gulpfile.babel.js/tasks/report.js | 12 --- gulpfile.babel.js/tasks/sass.js | 43 -------- gulpfile.babel.js/tasks/uglify.js | 10 -- gulpfile.babel.js/tasks/watch.js | 31 ------ index.html | 25 +++++ package.json | 90 +++++++--------- src/components/main.js | 22 ---- src/components/mdBottomBar/mdBottomBar.scss | 2 +- src/components/mdBottomBar/mdBottomBar.vue | 4 +- .../mdBottomBar/mdBottomBarItem.vue | 2 +- src/components/mdButton/mdButton.scss | 2 +- src/components/mdButton/mdButton.vue | 4 +- src/components/mdButton/mdLinkButton.vue | 2 +- src/components/mdIcon/mdIcon.scss | 2 +- src/components/mdIcon/mdIcon.vue | 2 +- src/components/mdInkRipple/mdInkRipple.scss | 2 +- src/components/mdInkRipple/mdInkRipple.vue | 2 +- src/core/core.vue | 17 +++ src/{stylesheets => core}/structure.scss | 0 src/{stylesheets => core}/type.scss | 0 src/{stylesheets => core}/utils/commons.scss | 0 src/{stylesheets => core}/utils/mixins.scss | 0 src/{stylesheets => core}/variables.scss | 0 src/docs.vue | 72 +++++++++++++ src/main.js | 18 ++++ src/stylesheets/core.scss | 15 --- static/.gitkeep | 0 50 files changed, 658 insertions(+), 515 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 build/build.js create mode 100644 build/dev-client.js create mode 100644 build/dev-server.js create mode 100644 build/utils.js create mode 100644 build/webpack.base.conf.js create mode 100644 build/webpack.dev.conf.js create mode 100644 build/webpack.prod.conf.js create mode 100644 config/dev.env.js create mode 100644 config/index.js create mode 100644 config/prod.env.js create mode 100644 config/test.env.js delete mode 100644 demo/index.html delete mode 100644 gulpfile.babel.js/config.js delete mode 100644 gulpfile.babel.js/index.js delete mode 100644 gulpfile.babel.js/tasks/browser-sync.js delete mode 100644 gulpfile.babel.js/tasks/browserify.js delete mode 100644 gulpfile.babel.js/tasks/clean.js delete mode 100644 gulpfile.babel.js/tasks/copy.js delete mode 100644 gulpfile.babel.js/tasks/eslint.js delete mode 100644 gulpfile.babel.js/tasks/report.js delete mode 100644 gulpfile.babel.js/tasks/sass.js delete mode 100644 gulpfile.babel.js/tasks/uglify.js delete mode 100644 gulpfile.babel.js/tasks/watch.js create mode 100644 index.html delete mode 100644 src/components/main.js create mode 100644 src/core/core.vue rename src/{stylesheets => core}/structure.scss (100%) rename src/{stylesheets => core}/type.scss (100%) rename src/{stylesheets => core}/utils/commons.scss (100%) rename src/{stylesheets => core}/utils/mixins.scss (100%) rename src/{stylesheets => core}/variables.scss (100%) create mode 100644 src/docs.vue create mode 100644 src/main.js delete mode 100644 src/stylesheets/core.scss create mode 100644 static/.gitkeep diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..34af377 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,2 @@ +build/*.js +config/*.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..dd20f36 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,15 @@ +module.exports = { + root: true, + parserOptions: { + sourceType: 'module' + }, + // required to lint *.vue files + plugins: [ + 'html' + ], + // add your custom rules here + 'rules': { + // allow debugger during development + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 + } +} diff --git a/.gitignore b/.gitignore index 6122bb3..be86a2b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ -node_modules -.tmp -dest +.DS_Store +node_modules/ +dist/ +npm-debug.log +selenium-debug.log +test/unit/coverage +test/e2e/reports diff --git a/README.md b/README.md index cf62053..b0c1a47 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,27 @@ # Vue.js Material -## Introduction +> Material Design for Vue.js -## Still in development +## Build Setup -## License +``` bash +### install dependencies +npm install -MIT +### serve with hot reload at localhost:8080 +npm run dev + +### build for production with minification +npm run build + +### run unit tests +npm run unit + +### run e2e tests +npm run e2e + +### run all tests +npm test +``` + +For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). diff --git a/build/build.js b/build/build.js new file mode 100644 index 0000000..37f5a82 --- /dev/null +++ b/build/build.js @@ -0,0 +1,35 @@ +// https://github.com/shelljs/shelljs +require('shelljs/global') +env.NODE_ENV = 'production' + +var path = require('path') +var config = require('../config') +var ora = require('ora') +var webpack = require('webpack') +var webpackConfig = require('./webpack.prod.conf') + +console.log( + ' Tip:\n' + + ' Built files are meant to be served over an HTTP server.\n' + + ' Opening index.html over file:// won\'t work.\n' +) + +var spinner = ora('building for production...') +spinner.start() + +var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) +rm('-rf', assetsPath) +mkdir('-p', assetsPath) +cp('-R', 'static/', assetsPath) + +webpack(webpackConfig, function (err, stats) { + spinner.stop() + if (err) throw err + process.stdout.write(stats.toString({ + colors: true, + modules: false, + children: false, + chunks: false, + chunkModules: false + }) + '\n') +}) diff --git a/build/dev-client.js b/build/dev-client.js new file mode 100644 index 0000000..18aa1e2 --- /dev/null +++ b/build/dev-client.js @@ -0,0 +1,9 @@ +/* eslint-disable */ +require('eventsource-polyfill') +var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') + +hotClient.subscribe(function (event) { + if (event.action === 'reload') { + window.location.reload() + } +}) diff --git a/build/dev-server.js b/build/dev-server.js new file mode 100644 index 0000000..3833a2a --- /dev/null +++ b/build/dev-server.js @@ -0,0 +1,65 @@ +var path = require('path') +var express = require('express') +var webpack = require('webpack') +var config = require('../config') +var proxyMiddleware = require('http-proxy-middleware') +var webpackConfig = process.env.NODE_ENV === 'testing' + ? require('./webpack.prod.conf') + : require('./webpack.dev.conf') + +// default port where dev server listens for incoming traffic +var port = process.env.PORT || config.dev.port +// Define HTTP proxies to your custom API backend +// https://github.com/chimurai/http-proxy-middleware +var proxyTable = config.dev.proxyTable + +var app = express() +var compiler = webpack(webpackConfig) + +var devMiddleware = require('webpack-dev-middleware')(compiler, { + publicPath: webpackConfig.output.publicPath, + stats: { + colors: true, + chunks: false + } +}) + +var hotMiddleware = require('webpack-hot-middleware')(compiler) +// force page reload when html-webpack-plugin template changes +compiler.plugin('compilation', function (compilation) { + compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { + hotMiddleware.publish({ action: 'reload' }) + cb() + }) +}) + +// proxy api requests +Object.keys(proxyTable).forEach(function (context) { + var options = proxyTable[context] + if (typeof options === 'string') { + options = { target: options } + } + app.use(proxyMiddleware(context, options)) +}) + +// handle fallback for HTML5 history API +app.use(require('connect-history-api-fallback')()) + +// serve webpack bundle output +app.use(devMiddleware) + +// enable hot-reload and state-preserving +// compilation error display +app.use(hotMiddleware) + +// serve pure static assets +var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) +app.use(staticPath, express.static('./static')) + +module.exports = app.listen(port, function (err) { + if (err) { + console.log(err) + return + } + console.log('Listening at http://localhost:' + port + '\n') +}) diff --git a/build/utils.js b/build/utils.js new file mode 100644 index 0000000..d294e35 --- /dev/null +++ b/build/utils.js @@ -0,0 +1,56 @@ +var path = require('path') +var config = require('../config') +var ExtractTextPlugin = require('extract-text-webpack-plugin') + +exports.assetsPath = function (_path) { + return path.posix.join(config.build.assetsSubDirectory, _path) +} + +exports.cssLoaders = function (options) { + options = options || {} + // generate loader string to be used with extract text plugin + function generateLoaders (loaders) { + var sourceLoader = loaders.map(function (loader) { + var extraParamChar + if (/\?/.test(loader)) { + loader = loader.replace(/\?/, '-loader?') + extraParamChar = '&' + } else { + loader = loader + '-loader' + extraParamChar = '?' + } + return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') + }).join('!') + + if (options.extract) { + return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) + } else { + return ['vue-style-loader', sourceLoader].join('!') + } + } + + // http://vuejs.github.io/vue-loader/configurations/extract-css.html + return { + css: generateLoaders(['css']), + postcss: generateLoaders(['css']), + less: generateLoaders(['css', 'less']), + sass: generateLoaders(['css', 'sass?indentedSyntax']), + scss: generateLoaders(['css', 'sass']), + stylus: generateLoaders(['css', 'stylus']), + styl: generateLoaders(['css', 'stylus']) + } +} + +// Generate loaders for standalone style files (outside of .vue) +exports.styleLoaders = function (options) { + var output = [] + var loaders = exports.cssLoaders(options) + for (var extension in loaders) { + var loader = loaders[extension] + output.push({ + test: new RegExp('\\.' + extension + '$'), + loader: loader + }) + } + return output +} diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js new file mode 100644 index 0000000..78552fd --- /dev/null +++ b/build/webpack.base.conf.js @@ -0,0 +1,85 @@ +var path = require('path') +var config = require('../config') +var utils = require('./utils') +var projectRoot = path.resolve(__dirname, '../') + +module.exports = { + entry: { + app: './src/main.js' + }, + output: { + path: config.build.assetsRoot, + publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, + filename: '[name].js' + }, + resolve: { + extensions: ['', '.js', '.vue'], + fallback: [path.join(__dirname, '../node_modules')], + alias: { + 'src': path.resolve(__dirname, '../src'), + 'assets': path.resolve(__dirname, '../src/assets'), + 'components': path.resolve(__dirname, '../src/components') + } + }, + resolveLoader: { + fallback: [path.join(__dirname, '../node_modules')] + }, + module: { + preLoaders: [ + { + test: /\.vue$/, + loader: 'eslint', + include: projectRoot, + exclude: /node_modules/ + }, + { + test: /\.js$/, + loader: 'eslint', + include: projectRoot, + exclude: /node_modules/ + } + ], + loaders: [ + { + test: /\.vue$/, + loader: 'vue' + }, + { + test: /\.js$/, + loader: 'babel', + include: projectRoot, + exclude: /node_modules/ + }, + { + test: /\.json$/, + loader: 'json' + }, + { + test: /\.html$/, + loader: 'vue-html' + }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url', + query: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]') + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url', + query: { + limit: 10000, + name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + } + } + ] + }, + eslint: { + formatter: require('eslint-friendly-formatter') + }, + vue: { + loaders: utils.cssLoaders() + } +} diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js new file mode 100644 index 0000000..662df01 --- /dev/null +++ b/build/webpack.dev.conf.js @@ -0,0 +1,34 @@ +var config = require('../config') +var webpack = require('webpack') +var merge = require('webpack-merge') +var utils = require('./utils') +var baseWebpackConfig = require('./webpack.base.conf') +var HtmlWebpackPlugin = require('html-webpack-plugin') + +// add hot-reload related code to entry chunks +Object.keys(baseWebpackConfig.entry).forEach(function (name) { + baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) +}) + +module.exports = merge(baseWebpackConfig, { + module: { + loaders: utils.styleLoaders() + }, + // eval-source-map is faster for development + devtool: '#eval-source-map', + plugins: [ + new webpack.DefinePlugin({ + 'process.env': config.dev.env + }), + // https://github.com/glenjamin/webpack-hot-middleware#installation--usage + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + // https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: 'index.html', + template: 'index.html', + inject: true + }) + ] +}) diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js new file mode 100644 index 0000000..6119f70 --- /dev/null +++ b/build/webpack.prod.conf.js @@ -0,0 +1,102 @@ +var path = require('path') +var config = require('../config') +var utils = require('./utils') +var webpack = require('webpack') +var merge = require('webpack-merge') +var baseWebpackConfig = require('./webpack.base.conf') +var ExtractTextPlugin = require('extract-text-webpack-plugin') +var HtmlWebpackPlugin = require('html-webpack-plugin') +var env = process.env.NODE_ENV === 'testing' + ? require('../config/test.env') + : config.build.env + +var webpackConfig = merge(baseWebpackConfig, { + module: { + loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) + }, + devtool: config.build.productionSourceMap ? '#source-map' : false, + output: { + path: config.build.assetsRoot, + filename: utils.assetsPath('js/[name].[chunkhash].js'), + chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') + }, + vue: { + loaders: utils.cssLoaders({ + sourceMap: config.build.productionSourceMap, + extract: true + }) + }, + plugins: [ + // http://vuejs.github.io/vue-loader/workflow/production.html + new webpack.DefinePlugin({ + 'process.env': env + }), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + } + }), + new webpack.optimize.OccurenceOrderPlugin(), + // extract css into its own file + new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), + // generate dist index.html with correct asset hash for caching. + // you can customize output by editing /index.html + // see https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: process.env.NODE_ENV === 'testing' + ? 'index.html' + : config.build.index, + template: 'index.html', + inject: true, + minify: { + removeComments: true, + collapseWhitespace: true, + removeAttributeQuotes: true + // more options: + // https://github.com/kangax/html-minifier#options-quick-reference + }, + // necessary to consistently work with multiple chunks via CommonsChunkPlugin + chunksSortMode: 'dependency' + }), + // split vendor js into its own file + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: function (module, count) { + // any required modules inside node_modules are extracted to vendor + return ( + module.resource && + /\.js$/.test(module.resource) && + module.resource.indexOf( + path.join(__dirname, '../node_modules') + ) === 0 + ) + } + }), + // extract webpack runtime and module manifest to its own file in order to + // prevent vendor hash from being updated whenever app bundle is updated + new webpack.optimize.CommonsChunkPlugin({ + name: 'manifest', + chunks: ['vendor'] + }) + ] +}) + +if (config.build.productionGzip) { + var CompressionWebpackPlugin = require('compression-webpack-plugin') + + webpackConfig.plugins.push( + new CompressionWebpackPlugin({ + asset: '[path].gz[query]', + algorithm: 'gzip', + test: new RegExp( + '\\.(' + + config.build.productionGzipExtensions.join('|') + + ')$' + ), + threshold: 10240, + minRatio: 0.8 + }) + ) +} + +module.exports = webpackConfig diff --git a/config/dev.env.js b/config/dev.env.js new file mode 100644 index 0000000..efead7c --- /dev/null +++ b/config/dev.env.js @@ -0,0 +1,6 @@ +var merge = require('webpack-merge') +var prodEnv = require('./prod.env') + +module.exports = merge(prodEnv, { + NODE_ENV: '"development"' +}) diff --git a/config/index.js b/config/index.js new file mode 100644 index 0000000..ca140a8 --- /dev/null +++ b/config/index.js @@ -0,0 +1,26 @@ +// see http://vuejs-templates.github.io/webpack for documentation. +var path = require('path') + +module.exports = { + build: { + env: require('./prod.env'), + index: path.resolve(__dirname, '../dist/index.html'), + assetsRoot: path.resolve(__dirname, '../dist'), + assetsSubDirectory: 'static', + assetsPublicPath: '/', + productionSourceMap: true, + // Gzip off by default as many popular static hosts such as + // Surge or Netlify already gzip all static assets for you. + // Before setting to `true`, make sure to: + // npm install --save-dev compression-webpack-plugin + productionGzip: false, + productionGzipExtensions: ['js', 'css'] + }, + dev: { + env: require('./dev.env'), + port: 8080, + assetsSubDirectory: 'static', + assetsPublicPath: '/', + proxyTable: {} + } +} diff --git a/config/prod.env.js b/config/prod.env.js new file mode 100644 index 0000000..773d263 --- /dev/null +++ b/config/prod.env.js @@ -0,0 +1,3 @@ +module.exports = { + NODE_ENV: '"production"' +} diff --git a/config/test.env.js b/config/test.env.js new file mode 100644 index 0000000..89f90de --- /dev/null +++ b/config/test.env.js @@ -0,0 +1,6 @@ +var merge = require('webpack-merge') +var devEnv = require('./dev.env') + +module.exports = merge(devEnv, { + NODE_ENV: '"testing"' +}) diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index 3672734..0000000 --- a/demo/index.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - - - - - - Vue.js Material - - - - - - - -
- Button - Primary - Raised - Disabled - Dense - - menu - - -
- - format_align_left - - - - format_align_center - - - - format_align_right - - - - format_align_justify - -
- -
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, - quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse - cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non - proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
- -
- - Movies - Music - Books - Pictures - Shop - - - - Movies - Music - Books - Pictures - Shop - -
-
- - - - diff --git a/gulpfile.babel.js/config.js b/gulpfile.babel.js/config.js deleted file mode 100644 index c5dc7f7..0000000 --- a/gulpfile.babel.js/config.js +++ /dev/null @@ -1,32 +0,0 @@ -import path from 'path'; - -let gulp = { - path: 'gulp', - scripts: [path.normalize('gulpfile.babel.js/**/*.js')] -}; - -let src = { - path: 'src', - files: path.normalize('src/**/*.{html,json}'), - html: path.normalize('src/**/*.html'), - components: path.normalize('src/components/**/*.{vue,js}'), - stylesheet: path.normalize('src/**/core.scss'), - stylesheets: path.normalize('src/**/*.scss') -}; - -let dest = { - path: 'dest', - components: path.normalize('dest/components/**/*.js'), - stylesheets: path.normalize('dest') -}; - -let demo = { - path: 'demo' -}; - -export default { - gulp, - src, - dest, - demo -}; diff --git a/gulpfile.babel.js/index.js b/gulpfile.babel.js/index.js deleted file mode 100644 index c404dbe..0000000 --- a/gulpfile.babel.js/index.js +++ /dev/null @@ -1,36 +0,0 @@ -import runSequence from 'run-sequence'; -import gulp from 'gulp'; -import './tasks/clean'; -import './tasks/copy'; -import './tasks/browserify'; -import './tasks/sass'; -import './tasks/eslint'; -import './tasks/watch'; -import './tasks/uglify'; -import './tasks/report'; - -gulp.task('default', () => { - runSequence( - 'clean', - [ - //'browserify', - 'eslint-all', - 'sass', - 'copy' - ], - 'watch' - ); -}); - -gulp.task('build', () => { - runSequence( - 'clean', - [ - 'copy', - 'browserify-build', - 'sass-build' - ], - 'uglify', - 'report' - ); -}); diff --git a/gulpfile.babel.js/tasks/browser-sync.js b/gulpfile.babel.js/tasks/browser-sync.js deleted file mode 100644 index 4cf85ce..0000000 --- a/gulpfile.babel.js/tasks/browser-sync.js +++ /dev/null @@ -1,36 +0,0 @@ -import _browsersync from 'browser-sync'; -import gulp from 'gulp'; -import config from '../config'; - -let browserSync = _browsersync.create(); - -gulp.task('browserSync', () => { - browserSync.init({ - notify: false, - logLevel: 'silent', - logSnippet: false, - port: 9000, - ghostMode: { - clicks: true, - scroll: true, - links: true, - forms: true - }, - server: { - baseDir: [ - 'node_modules', - config.demo.path, - config.dest.path - ] - }, - ui: { - port: 9001, - weinre: { - port: 9002 - } - }, - watchTask: true - }); -}); - -export default browserSync; diff --git a/gulpfile.babel.js/tasks/browserify.js b/gulpfile.babel.js/tasks/browserify.js deleted file mode 100644 index d6f241a..0000000 --- a/gulpfile.babel.js/tasks/browserify.js +++ /dev/null @@ -1,87 +0,0 @@ -import gulp from 'gulp'; -import util from 'gulp-util'; -import uglify from 'gulp-uglify'; -import path from 'path'; -import watchify from 'watchify'; -import babelify from 'babelify'; -import envify from 'envify/custom'; -import vueify from 'vueify'; -import prettyTime from 'pretty-hrtime'; -import browserify from 'browserify'; -import uglifyify from 'uglifyify'; -import source from 'vinyl-source-stream'; -import buffer from 'vinyl-buffer'; -import config from '../config'; -import browserSync from './browser-sync'; - -let app = 'main.js'; -let entry = path.normalize(config.src.path + '/components/' + app); - -gulp.task('browserify', () => { - let b = watchify(browserify({ - cache: {}, - packageCache: {}, - debug: true, - detectGlobals: false, - extensions: ['.js', '.json', '.vue'], - ignoreWatch: true, - noparse: ['node_modules/**/*.js'], - entries: entry - })); - - let bundle = () => { - let bundleTimer = process.hrtime(); - - return b - .transform(envify({ - NODE_ENV: 'development' - })) - .transform(vueify) - .transform(babelify.configure()) - .bundle() - .on('error', (error) => { - let dirname = path.join(__dirname, '..', '..', 'src') + '/'; - - if (error.fileName) { - util.log(util.colors.red(error.name) - + ': ' + util.colors.yellow(error.fileName.replace(dirname, '')) - + ': ' + 'Line ' + util.colors.magenta(error.lineNumber) - + ' & ' + 'Column ' + util.colors.magenta(error.columnNumber || error.column) - + ': ' + util.colors.blue(error.description)); - } else { - util.log(util.colors.red(error.name) + ': ' + util.colors.yellow(error.message.replace(dirname, ''))); - } - }) - .pipe(source(app)) - .pipe(buffer()) - .pipe(gulp.dest(path.normalize(config.dest.path + '/components'))) - .pipe(browserSync.stream()) - .on('finish', () => { - util.log('Browserify', util.colors.cyan(app), 'after', util.colors.magenta(prettyTime(process.hrtime(bundleTimer)))); - }); - }; - - b.on('update', bundle); - - return bundle(); -}); - -gulp.task('browserify-build', () => { - let bundleTimer = process.hrtime(); - - return browserify(entry) - .transform(envify({ - NODE_ENV: 'development' - })) - .transform(vueify) - .transform(babelify.configure()) - .transform(uglifyify) - .bundle() - .pipe(source(app)) - .pipe(buffer()) - .pipe(uglify()) - .pipe(gulp.dest(path.normalize(config.dest.path + '/components'))) - .on('finish', () => { - util.log('Browserify', util.colors.cyan(app), 'after', util.colors.magenta(prettyTime(process.hrtime(bundleTimer)))); - }); -}); diff --git a/gulpfile.babel.js/tasks/clean.js b/gulpfile.babel.js/tasks/clean.js deleted file mode 100644 index bc72b7f..0000000 --- a/gulpfile.babel.js/tasks/clean.js +++ /dev/null @@ -1,7 +0,0 @@ -import gulp from 'gulp'; -import del from 'del'; -import config from '../config'; - -gulp.task('clean', () => { - return del([config.dest.path]); -}); diff --git a/gulpfile.babel.js/tasks/copy.js b/gulpfile.babel.js/tasks/copy.js deleted file mode 100644 index 4c32837..0000000 --- a/gulpfile.babel.js/tasks/copy.js +++ /dev/null @@ -1,8 +0,0 @@ -import gulp from 'gulp'; -import config from '../config'; - -gulp.task('copy', () => { - return gulp - .src(config.src.files) - .pipe(gulp.dest(config.dest.path)); -}); diff --git a/gulpfile.babel.js/tasks/eslint.js b/gulpfile.babel.js/tasks/eslint.js deleted file mode 100644 index 46e7f6a..0000000 --- a/gulpfile.babel.js/tasks/eslint.js +++ /dev/null @@ -1,27 +0,0 @@ -import gulp from 'gulp'; -import eslint from 'gulp-eslint'; -import changed from 'gulp-changed-in-place'; -import config from '../config'; - -gulp.task('eslint-all', () => { - return gulp - .src(config.gulp.scripts.concat(config.src.components)) - .pipe(eslint()) - .pipe(eslint.format()); -}); - -gulp.task('eslint-gulp', () => { - return gulp - .src(config.gulp.components) - .pipe(changed()) - .pipe(eslint()) - .pipe(eslint.format()); -}); - -gulp.task('eslint', () => { - return gulp - .src(config.src.components) - .pipe(changed()) - .pipe(eslint()) - .pipe(eslint.format()); -}); diff --git a/gulpfile.babel.js/tasks/report.js b/gulpfile.babel.js/tasks/report.js deleted file mode 100644 index 4501c66..0000000 --- a/gulpfile.babel.js/tasks/report.js +++ /dev/null @@ -1,12 +0,0 @@ -import gulp from 'gulp'; -import path from 'path'; -import size from 'gulp-size'; -import config from '../config'; - -gulp.task('report', () => { - return gulp - .src(path.normalize(config.dest.path + '/**/*')) - .pipe(size({ - title: 'Size of' - })); -}); diff --git a/gulpfile.babel.js/tasks/sass.js b/gulpfile.babel.js/tasks/sass.js deleted file mode 100644 index 4270abc..0000000 --- a/gulpfile.babel.js/tasks/sass.js +++ /dev/null @@ -1,43 +0,0 @@ -import gulp from 'gulp'; -import sass from 'gulp-sass'; -import cssImport from 'gulp-import-css'; -import moduleImporter from 'sass-module-importer'; -import sourcemaps from 'gulp-sourcemaps'; -import cssnano from 'gulp-cssnano'; -import autoprefixer from 'gulp-autoprefixer'; -import browserSync from './browser-sync'; -import config from '../config'; - -gulp.task('sass', () => { - return gulp - .src(config.src.stylesheet) - .pipe(sourcemaps.init()) - .pipe( - sass({ - importer: moduleImporter(), - outputStyle: 'expanded' - }).on('error', sass.logError) - ) - .pipe(cssImport()) - .pipe(sourcemaps.write()) - .pipe(gulp.dest(config.dest.stylesheets)) - .pipe(browserSync.stream()); -}); - -gulp.task('sass-build', () => { - return gulp - .src(config.src.stylesheet) - .pipe( - sass({ - importer: moduleImporter() - }).on('error', sass.logError) - ) - .pipe(cssImport()) - .pipe(autoprefixer({ - browsers: ['last 2 versions'], - flexbox: 'no-2009', - cascade: false - })) - .pipe(cssnano({ discardComments: {removeAll: true} })) - .pipe(gulp.dest(config.dest.stylesheets)); -}); diff --git a/gulpfile.babel.js/tasks/uglify.js b/gulpfile.babel.js/tasks/uglify.js deleted file mode 100644 index 3ccccbf..0000000 --- a/gulpfile.babel.js/tasks/uglify.js +++ /dev/null @@ -1,10 +0,0 @@ -import gulp from 'gulp'; -import path from 'path'; -import uglify from 'gulp-uglify'; -import config from '../config'; - -gulp.task('uglify', () => { - return gulp.src(path.normalize(config.dest.components)) - .pipe(uglify()) - .pipe(gulp.dest(path.normalize(config.dest.path + '/components'))); -}); diff --git a/gulpfile.babel.js/tasks/watch.js b/gulpfile.babel.js/tasks/watch.js deleted file mode 100644 index 0543adf..0000000 --- a/gulpfile.babel.js/tasks/watch.js +++ /dev/null @@ -1,31 +0,0 @@ -import gulp from 'gulp'; -import watch from 'gulp-watch'; -import runSequence from 'run-sequence'; -import config from '../config'; -import browserSync from './browser-sync'; - -let watchConfig = { - verbose: true -}; - -gulp.task('watch', ['browserSync'], () => { - watch(['.eslintrc', '.eslintignore'], watchConfig, () => { - runSequence('eslint-all'); - }); - - watch(config.gulp.scripts, watchConfig, () => { - runSequence('eslint-gulp'); - }); - - watch(config.src.components, watchConfig, () => { - runSequence('eslint'); - }); - - watch(config.src.stylesheets, watchConfig, () => { - runSequence('sass'); - }); - - watch(config.src.files, watchConfig, () => { - runSequence('copy', browserSync.reload); - }); -}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..19dfc80 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + Vue.js Material + + + + + + + + + + diff --git a/package.json b/package.json index b38842c..9bca981 100644 --- a/package.json +++ b/package.json @@ -1,63 +1,55 @@ { - "projectName": "Vue.js Material", "name": "vuejs-material", "description": "Material Design for Vue.js", - "developers": "Marcos Moura", "version": "0.0.0", + "author": "Marcos Moura ", + "private": true, "repository": { "type": "git", "url": "https://github.com/marcosmoura/vue-material.git" }, - "authors": [ - "Marcos Moura " - ], "scripts": { - "watch": "watchify -vd -p browserify-hmr -e src/components/main.js -o dest/components/main.js" - }, - "browserify": { - "transform": [ - "envify", - "vueify", - "babelify" - ] - }, - "devDependencies": { - "babel-core": "^6.10.4", - "babel-eslint": "^6.1.2", - "babel-plugin-transform-runtime": "^6.6.0", - "babel-preset-es2015": "^6.6.0", - "babel-preset-stage-0": "^6.5.0", - "babel-runtime": "^6.6.1", - "babelify": "^7.2.0", - "browser-sync": "^2.11.2", - "browserify": "^13.0.0", - "del": "^2.2.1", - "envify": "^3.4.1", - "eslint-plugin-html": "^1.5.1", - "gulp": "^3.9.1", - "gulp-autoprefixer": "^3.1.0", - "gulp-babel": "^6.1.2", - "gulp-changed": "^1.3.0", - "gulp-changed-in-place": "^2.0.3", - "gulp-cssnano": "^2.1.1", - "gulp-eslint": "^3.0.1", - "gulp-import-css": "^0.1.2", - "gulp-sass": "^2.2.0", - "gulp-size": "^2.1.0", - "gulp-sourcemaps": "^1.6.0", - "gulp-uglify": "^1.5.4", - "gulp-util": "^3.0.7", - "gulp-watch": "^4.3.8", - "pretty-hrtime": "^1.0.2", - "run-sequence": "^1.2.2", - "sass-module-importer": "^1.2.0", - "uglifyify": "^3.0.1", - "vinyl-buffer": "^1.0.0", - "vinyl-source-stream": "^1.1.0", - "vueify": "^8.7.0", - "watchify": "^3.7.0" + "dev": "node build/dev-server.js", + "build": "node build/build.js", + "test": "", + "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" }, "dependencies": { "vue": "^1.0.26" + }, + "devDependencies": { + "babel-core": "^6.10.4", + "babel-loader": "^6.2.4", + "babel-plugin-transform-runtime": "^6.9.0", + "babel-preset-es2015": "^6.9.0", + "babel-preset-stage-0": "^6.5.0", + "babel-runtime": "^6.9.2", + "connect-history-api-fallback": "^1.2.0", + "css-loader": "^0.23.1", + "eslint": "^3.0.1", + "eslint-friendly-formatter": "^2.0.5", + "eslint-loader": "^1.4.1", + "eslint-plugin-html": "^1.5.1", + "eventsource-polyfill": "^0.9.6", + "express": "^4.14.0", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.9.0", + "function-bind": "^1.1.0", + "html-webpack-plugin": "^2.22.0", + "http-proxy-middleware": "^0.17.0", + "json-loader": "^0.5.4", + "node-sass": "^3.8.0", + "ora": "^0.2.3", + "sass-loader": "^4.0.0", + "shelljs": "^0.7.0", + "url-loader": "^0.5.7", + "vue-hot-reload-api": "^1.3.3", + "vue-html-loader": "^1.2.3", + "vue-loader": "^8.5.3", + "vue-style-loader": "^1.0.0", + "webpack": "^1.13.1", + "webpack-dev-middleware": "^1.6.1", + "webpack-hot-middleware": "^2.12.1", + "webpack-merge": "^0.14.0" } } diff --git a/src/components/main.js b/src/components/main.js deleted file mode 100644 index 1797374..0000000 --- a/src/components/main.js +++ /dev/null @@ -1,22 +0,0 @@ -import Vue from 'vue/dist/vue.min'; -import MdInkRipple from './mdInkRipple'; -import MdButton from './mdButton'; -import MdIcon from './mdIcon'; -import MdBottomBar from './mdBottomBar'; - -Vue.use(MdInkRipple); -Vue.use(MdButton); -Vue.use(MdIcon); -Vue.use(MdBottomBar); - -new Vue({ - el: '#app', - data: { - disabled: false - }, - methods: { - clickAction() { - this.disabled = !this.disabled; - } - } -}); diff --git a/src/components/mdBottomBar/mdBottomBar.scss b/src/components/mdBottomBar/mdBottomBar.scss index e5b3a9e..423767c 100644 --- a/src/components/mdBottomBar/mdBottomBar.scss +++ b/src/components/mdBottomBar/mdBottomBar.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/variables.scss'; +@import '../../core/variables.scss'; .md-bottom-bar { width: 100%; diff --git a/src/components/mdBottomBar/mdBottomBar.vue b/src/components/mdBottomBar/mdBottomBar.vue index 98894ad..c675e4f 100644 --- a/src/components/mdBottomBar/mdBottomBar.vue +++ b/src/components/mdBottomBar/mdBottomBar.vue @@ -4,6 +4,6 @@ - + - + diff --git a/src/components/mdBottomBar/mdBottomBarItem.vue b/src/components/mdBottomBar/mdBottomBarItem.vue index 8663628..95736a7 100644 --- a/src/components/mdBottomBar/mdBottomBarItem.vue +++ b/src/components/mdBottomBar/mdBottomBarItem.vue @@ -8,4 +8,4 @@ - + diff --git a/src/components/mdButton/mdButton.scss b/src/components/mdButton/mdButton.scss index ceb6881..2a9eba1 100644 --- a/src/components/mdButton/mdButton.scss +++ b/src/components/mdButton/mdButton.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/variables.scss'; +@import '../../core/variables.scss'; $button-width: 88px; $button-height: 36px; diff --git a/src/components/mdButton/mdButton.vue b/src/components/mdButton/mdButton.vue index f765aa4..ac7fb0c 100644 --- a/src/components/mdButton/mdButton.vue +++ b/src/components/mdButton/mdButton.vue @@ -4,6 +4,6 @@ - + - + diff --git a/src/components/mdButton/mdLinkButton.vue b/src/components/mdButton/mdLinkButton.vue index 5a973a8..7246f00 100644 --- a/src/components/mdButton/mdLinkButton.vue +++ b/src/components/mdButton/mdLinkButton.vue @@ -4,4 +4,4 @@ - + diff --git a/src/components/mdIcon/mdIcon.scss b/src/components/mdIcon/mdIcon.scss index 01c4a33..fc7fd26 100644 --- a/src/components/mdIcon/mdIcon.scss +++ b/src/components/mdIcon/mdIcon.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/variables.scss'; +@import '../../core/variables.scss'; $icon-size: 24px; diff --git a/src/components/mdIcon/mdIcon.vue b/src/components/mdIcon/mdIcon.vue index cb07339..565c9e0 100644 --- a/src/components/mdIcon/mdIcon.vue +++ b/src/components/mdIcon/mdIcon.vue @@ -4,4 +4,4 @@ - + diff --git a/src/components/mdInkRipple/mdInkRipple.scss b/src/components/mdInkRipple/mdInkRipple.scss index 2212a8c..c6be251 100644 --- a/src/components/mdInkRipple/mdInkRipple.scss +++ b/src/components/mdInkRipple/mdInkRipple.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/variables.scss'; +@import '../../core/variables.scss'; .md-ink-ripple { pointer-events: none; diff --git a/src/components/mdInkRipple/mdInkRipple.vue b/src/components/mdInkRipple/mdInkRipple.vue index 6a5ae9f..2932212 100644 --- a/src/components/mdInkRipple/mdInkRipple.vue +++ b/src/components/mdInkRipple/mdInkRipple.vue @@ -1 +1 @@ - + diff --git a/src/core/core.vue b/src/core/core.vue new file mode 100644 index 0000000..7d0ef94 --- /dev/null +++ b/src/core/core.vue @@ -0,0 +1,17 @@ + diff --git a/src/stylesheets/structure.scss b/src/core/structure.scss similarity index 100% rename from src/stylesheets/structure.scss rename to src/core/structure.scss diff --git a/src/stylesheets/type.scss b/src/core/type.scss similarity index 100% rename from src/stylesheets/type.scss rename to src/core/type.scss diff --git a/src/stylesheets/utils/commons.scss b/src/core/utils/commons.scss similarity index 100% rename from src/stylesheets/utils/commons.scss rename to src/core/utils/commons.scss diff --git a/src/stylesheets/utils/mixins.scss b/src/core/utils/mixins.scss similarity index 100% rename from src/stylesheets/utils/mixins.scss rename to src/core/utils/mixins.scss diff --git a/src/stylesheets/variables.scss b/src/core/variables.scss similarity index 100% rename from src/stylesheets/variables.scss rename to src/core/variables.scss diff --git a/src/docs.vue b/src/docs.vue new file mode 100644 index 0000000..af7dc02 --- /dev/null +++ b/src/docs.vue @@ -0,0 +1,72 @@ + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..3931068 --- /dev/null +++ b/src/main.js @@ -0,0 +1,18 @@ +import Vue from 'vue'; +import Docs from './docs' +import Core from './core/core'; +import MdInkRipple from './components/mdInkRipple'; +import MdButton from './components/mdButton'; +import MdIcon from './components/mdIcon'; +import MdBottomBar from './components/mdBottomBar'; + +Vue.use(MdInkRipple); +Vue.use(MdButton); +Vue.use(MdIcon); +Vue.use(MdBottomBar); + +/* eslint-disable no-new */ +new Vue({ + el: 'body', + components: { Docs } +}); diff --git a/src/stylesheets/core.scss b/src/stylesheets/core.scss deleted file mode 100644 index ef87b01..0000000 --- a/src/stylesheets/core.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* Common mixins */ -@import 'utils/mixins'; - - -/* Commons */ -@import 'utils/commons'; - - -/* Variables */ -@import 'variables'; - - -/* Core Styles */ -@import 'structure'; -@import 'type'; diff --git a/static/.gitkeep b/static/.gitkeep new file mode 100644 index 0000000..e69de29