From 654ff78951fa8cd7d89f2051f8450f2bbddb01ff Mon Sep 17 00:00:00 2001 From: devfake Date: Thu, 23 Jun 2016 14:53:11 +0200 Subject: [PATCH] move to webpack --- README.md | 2 +- client/.babelrc | 5 ++++ client/app/app.js | 2 ++ client/app/components/nav.vue | 2 +- client/gulpfile.js | 20 -------------- client/package.json | 26 ++++++++++++------ client/resources/app.blade.php | 3 ++- client/resources/sass/_base.scss | 3 +-- client/webpack.config.js | 45 ++++++++++++++++++++++++++++++++ public/assets/css/app.css | 1 - 10 files changed, 75 insertions(+), 34 deletions(-) create mode 100644 client/.babelrc delete mode 100644 client/gulpfile.js create mode 100644 client/webpack.config.js delete mode 100644 public/assets/css/app.css diff --git a/README.md b/README.md index b054012..7abb7dc 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ It's build on top of [Laravel](https://www.laravel.com) and [Vue.js](http://vuej ##### Development * Run `npm install` in your `/client` folder. -* Run `gulp watch` or `gulp watch --production` and make your work. +* Run `webpack`, or `webpack -p` for production build. You can watch your assets with `webpack -w`. ### Misc diff --git a/client/.babelrc b/client/.babelrc new file mode 100644 index 0000000..f1c00ce --- /dev/null +++ b/client/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": ["es2015", "stage-2"], + "plugins": ["transform-runtime"], + "comments": false +} \ No newline at end of file diff --git a/client/app/app.js b/client/app/app.js index d7041eb..bb6b48e 100644 --- a/client/app/app.js +++ b/client/app/app.js @@ -1,3 +1,5 @@ +require('../resources/sass/app.scss'); + import Vue from 'vue'; import Resource from 'vue-resource'; diff --git a/client/app/components/nav.vue b/client/app/components/nav.vue index d7be477..dfe9697 100644 --- a/client/app/components/nav.vue +++ b/client/app/components/nav.vue @@ -21,7 +21,7 @@ history - powered by: SOUNDCLOUD + powered by: SOUNDCLOUD diff --git a/client/gulpfile.js b/client/gulpfile.js deleted file mode 100644 index dcefbc0..0000000 --- a/client/gulpfile.js +++ /dev/null @@ -1,20 +0,0 @@ -var elixir = require('laravel-elixir'); - -require('laravel-elixir-vueify'); - -elixir.config.sourcemaps = false; - -elixir.config.css.outputFolder = './../public/assets/css'; -elixir.config.js.outputFolder = './../public/assets/js'; -elixir.config.assetsPath = 'resources/'; -elixir.config.publicPath = '../public/'; - -elixir(function(mix) { - mix.sass('app.scss'); - - mix.browserify('./app/app.js'); - - if (elixir.isWatching()) { - mix.task('browserify', './app/**/**.vue'); - } -}); \ No newline at end of file diff --git a/client/package.json b/client/package.json index 0a701c0..c1e30eb 100644 --- a/client/package.json +++ b/client/package.json @@ -1,21 +1,31 @@ { "private": true, "scripts": { + "install:test": "npm install nightwatch selenium-server chromedriver", "e2e": "./node_modules/.bin/nightwatch" }, "dependencies": { "nouislider": "^8.5.1", - "vue": "^1.0.24", - "vue-resource": "^0.7.2", + "vue": "^1.0.25", + "vue-resource": "^0.8.0", "vuex": "^0.6.3" }, "devDependencies": { - "chromedriver": "^2.21.2", + "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-2": "^6.5.0", + "css-loader": "^0.23.1", "d3": "^3.5.17", - "gulp": "^3.9.1", - "laravel-elixir": "^6.0.0-2", - "laravel-elixir-vueify": "^1.0.3", - "nightwatch": "^0.9.4", - "selenium-server": "^2.53.0" + "file-loader": "^0.9.0", + "node-sass": "^3.8.0", + "sass-loader": "^3.2.1", + "style-loader": "^0.13.1", + "url-loader": "^0.5.7", + "vue-html-loader": "^1.2.3", + "vue-loader": "^8.5.3", + "vue-style-loader": "^1.0.0", + "webpack": "^1.13.1" } } diff --git a/client/resources/app.blade.php b/client/resources/app.blade.php index 9e31faf..4415242 100644 --- a/client/resources/app.blade.php +++ b/client/resources/app.blade.php @@ -10,7 +10,7 @@ cloudradioo | Discover New Music - + {{-- --}} @@ -25,6 +25,7 @@ + \ No newline at end of file diff --git a/client/resources/sass/_base.scss b/client/resources/sass/_base.scss index c659f52..d2010ac 100644 --- a/client/resources/sass/_base.scss +++ b/client/resources/sass/_base.scss @@ -14,8 +14,7 @@ input { outline: none; } .no-select { user-select: none; } body { - //background: url(../img/pattern.png) #1e1f42; - background: url(../img/pattern.png) #d59657; + background: url(../../../public/assets/img/pattern.png) #d59657; overflow: hidden; font-family: 'Slabo 27px', serif; } diff --git a/client/webpack.config.js b/client/webpack.config.js new file mode 100644 index 0000000..c7cc524 --- /dev/null +++ b/client/webpack.config.js @@ -0,0 +1,45 @@ +// todo +// - extract css +// - HOT +// - production env + +let webpack = require('webpack'); + +module.exports = { + entry: { + app: './app/app.js', + vendor: ['vue', 'vue-resource', 'vuex', 'd3'] + }, + output: { + filename: '../public/assets/js/app.js' + }, + module: { + loaders: [ + { + test: /\.vue$/, + loader: 'vue' + }, + { + test: /\.js$/, + loader: 'babel', + exclude: /node_modules/ + }, + { + test: /\.(png|jpg|svg)$/, + loader: 'url', + query: { + limit: 10000, + name: 'assets/img/[name].[ext]', + emitFile: false + } + }, + { + test: /\.scss$/, + loader: 'style!css!sass' + } + ] + }, + plugins: [ + new webpack.optimize.CommonsChunkPlugin('vendor', '../public/assets/js/vendor.js') + ] +}; \ No newline at end of file diff --git a/public/assets/css/app.css b/public/assets/css/app.css deleted file mode 100644 index c0ddc8b..0000000 --- a/public/assets/css/app.css +++ /dev/null @@ -1 +0,0 @@ -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */a,a:active,a:hover,input{outline:0}a,img,legend{border:0}*,legend,td,th{padding:0}*,body{margin:0}.noUi-base,.noUi-target,sub,sup{position:relative}body,nav,svg:not(:root){overflow:hidden}.option-elements a,.title,a{text-decoration:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:'Slabo 27px';font-style:normal;font-weight:400;src:local("Slabo 27px"),local("Slabo27px-Regular"),url(https://fonts.gstatic.com/s/slabo27px/v3/LfR9_S_HMdQ73mwIHBRxoSEAvth_LlrfE80CYdSH47w.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Slabo 27px';font-style:normal;font-weight:400;src:local("Slabo 27px"),local("Slabo27px-Regular"),url(https://fonts.gstatic.com/s/slabo27px/v3/PuwvqkdbcqU-fCZ9Ed-b7fk_vArhqVIZ0nv9q090hN8.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}*{box-sizing:border-box}::-moz-selection{background:#222;color:#fff}::selection{background:#222;color:#fff}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{background:url(../img/pattern.png) #d59657;font-family:'Slabo 27px',serif}.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-user-select:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box}.noUi-target{direction:ltr}.noUi-base{width:100%;height:100%;z-index:1}.noUi-origin{position:absolute;right:0;top:0;left:0;bottom:0}.noUi-handle{position:relative;z-index:1}.noUi-stacking .noUi-handle{z-index:10}.progress-wrap,header{position:absolute;z-index:200}.noUi-state-tap .noUi-origin{-webkit-transition:left .3s,top .3s;transition:left .3s,top .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-base,.noUi-handle{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.noUi-horizontal{height:18px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}.noUi-connect{background:#3FB8AF;box-shadow:inset 0 0 3px rgba(51,51,51,.45);-webkit-transition:background 450ms;transition:background 450ms}.noUi-target{box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-draggable{cursor:w-resize}.noUi-vertical .noUi-draggable{cursor:n-resize}.noUi-handle{border-radius:3px;background:#FFF;cursor:default}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.hidden-tools.show-share-track>a,.share-track-wrap{display:none}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect,[disabled].noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-origin{cursor:not-allowed}.progress-wrap{top:0;width:100%;padding:0 0 30px;cursor:pointer}.progress-wrap:hover .progress-bar{height:20px}.progress-wrap:hover .progress-time{opacity:1}.progress-bar{height:5px;float:left;width:0;background:rgba(255,255,255,.5);-webkit-transition:width .2s ease-in-out 0s,height .2s ease-in-out 0s;transition:width .2s ease-in-out 0s,height .2s ease-in-out 0s}.hidden-tools a,.progress-time{background:#222;color:#fff;padding:0 5px}.progress-time{position:absolute;right:0;opacity:0;-webkit-transition:opacity .3s ease-in-out 0s;transition:opacity .3s ease-in-out 0s}header{text-align:center;width:100%;margin:10vh 0 0;cursor:default}header:hover .hidden-tools{opacity:1}.hidden-tools{opacity:0;margin:10px 0 30px;-webkit-transition:opacity .2s ease-in-out 0s;transition:opacity .2s ease-in-out 0s}.hidden-tools a{cursor:pointer}.hidden-tools a:hover{background:#8c585e}.hidden-tools.active{opacity:1}.genre,.show-share-track .share-track-wrap{display:block}.share-track{width:240px;background:#fff;color:#222;padding:0 5px;border:0;margin:0 auto}.svg-wrap,.svg-wrap svg,nav{position:absolute;width:100%}.hideIndex{z-index:-1!important}.title{color:#fff;font-size:34px;font-weight:400}.author{color:#222;font-size:22px;margin:10px 0 0}.genre{color:#565656;margin:20px 0;font-size:18px}.svg-wrap{padding:40vh 0 0;left:-50%;height:100%;z-index:100;-webkit-transform:translateX(50%);transform:translateX(50%)}.svg-wrap svg{left:-50%;height:calc(100% - 40vh);-webkit-transform:translateX(50%);transform:translateX(50%)}nav{background:#222;left:0;bottom:0;height:60px}.nav-item,.nav-item>span{position:relative;float:left}.nav-item{font-size:22px;color:rgba(255,255,255,.2);-webkit-transition:background .2s ease-in-out 0s,color .2s ease-in-out 0s;transition:background .2s ease-in-out 0s,color .2s ease-in-out 0s}.nav-item>span{z-index:1000;padding:17px 20px;cursor:pointer;height:60px}.nav-item>span.attribution{padding-top:11px}.nav-item:hover{color:#fff}.nav-item.active{background:gray;color:#fff}.main-navigation{float:left}@media (max-width:1100px){.main-navigation{opacity:0;top:100%;width:100%;background:#222;z-index:1001;position:absolute;-webkit-transition:opacity .2s ease-in-out 0s,top .2s ease-in-out 0s;transition:opacity .2s ease-in-out 0s,top .2s ease-in-out 0s}.main-navigation.active{opacity:1;top:0}}.hidden-menu,.volume-wrap{position:relative;z-index:1000}.second-nav-item{float:right}.hidden-menu{float:left;display:none}@media (max-width:1100px){.hidden-menu{display:block}}.hidden-menu svg{fill:rgba(255,255,255,.2);cursor:pointer;-webkit-transition:fill .2s ease-in-out 0s;transition:fill .2s ease-in-out 0s;margin:0 0 0 10px}.hidden-menu svg:hover{fill:#fff}.close-hidden-menu{display:none;fill:rgba(255,255,255,.2);-webkit-transition:fill .2s ease-in-out 0s;transition:fill .2s ease-in-out 0s;cursor:pointer;margin:0 0 0 10px}.close-hidden-menu:hover{fill:#fff}@media (max-width:1100px){.close-hidden-menu{display:block}}.volume-wrap{width:170px;margin:0 30px 0 0}.noUi-target{height:10px;border:0;border-radius:0;cursor:pointer;margin:25px 0 0}.noUi-target.noUi-connect{background:#8c585e;box-shadow:none}.noUi-background{background:#4e4e4c;border-left:3px solid #b58d92;box-shadow:none}.noUi-origin{border-radius:0}.noUi-handle{border:0;box-shadow:none}.noUi-horizontal .noUi-handle{height:20px;width:20px;border-radius:100%;background:0 0;left:-10px;cursor:pointer;top:-5px}.noUi-handle::after,.noUi-handle::before{background:0 0}.music-controls{left:50%;z-index:600;-webkit-transform:translateX(-50%);transform:translateX(-50%);position:absolute}.music-controls svg{fill:#fff;-webkit-transition:opacity .1s ease-in-out 0s;transition:opacity .1s ease-in-out 0s;float:left;cursor:pointer}.second-nav-items{float:right;position:relative;z-index:1000}.option-elements,.subnav{position:absolute;width:100%}.pause-btn,.play-btn{opacity:.8}.pause-btn:hover,.play-btn:hover{opacity:1}.last-btn,.next-btn{opacity:.4}.last-btn:hover,.next-btn:hover{opacity:.8}.repeat-btn{fill:#fff;opacity:.4;cursor:pointer}.repeat-btn:hover{opacity:.6}.repeat-btn:active{opacity:.4}.repeat-btn.active{fill:#d9a977;opacity:.8}.option-elements{top:0;padding:40px;z-index:500;opacity:0;height:100%;overflow:auto;-webkit-transition:opacity .3s ease-in-out .1s;transition:opacity .3s ease-in-out .1s;visibility:hidden}.option-elements.active{visibility:visible;opacity:1}.option-elements p{line-height:21pt;font-size:17px;padding:0 0 30px}.option-elements a{color:#fff;border-bottom:1px solid #b2b2b2}.option-elements a:hover{border-bottom:1px solid #dadada}.option-elements h4{font-size:22px;float:left;margin:0 0 30px;width:100%;color:#222}code{font-size:13px;border:1px solid #b2b2b2;border-radius:3px;padding:1px 5px}.filter-divider{float:left;clear:both;margin:0 0 10px}.filter-divider:first-of-type{margin:0}.filter-divider input{float:left;cursor:pointer;margin:3px 0 0}.filter-divider label{cursor:pointer;float:left;margin:0 20px 0 8px;font-size:17px}.clear-history{float:right;background:#222;font-weight:400;color:#fff;font-size:15px;padding:2px 10px;margin:3px 0 0;cursor:pointer}.clear-history:hover{background:#8c585e}.clear-history:active{background:#222}.subnav{overflow:hidden;background:gray;max-width:440px;left:-30px;-webkit-transition:opacity .2s ease-in-out 0s,left .2s ease-in-out 0s,visibility .2s ease-in-out 0s;transition:opacity .2s ease-in-out 0s,left .2s ease-in-out 0s,visibility .2s ease-in-out 0s;bottom:60px;opacity:0;height:calc(100% - 60px);visibility:hidden;color:#fff}@media (max-width:650px){.subnav{width:100%}}.subnav.active{opacity:1;left:0;visibility:visible}.divider{float:left;width:100%;margin:20px 0;height:2px;background:#222}.history-items{float:left;list-style:none;width:100%}.history-item{float:left;width:100%;border-bottom:1px solid #b2b2b2;padding:10px 0;cursor:pointer}.history-item:hover .history-title{text-decoration:underline}.history-item:active .history-title{text-decoration:none}.history-item:last-child{border:none}.history-title{float:left;font-size:16px;width:100%}.history-author,.history-genre{float:left;font-size:15px;margin:3px 0 0;color:#222}.history-genre{float:right} \ No newline at end of file