From 3ebecc36f13e79ea858941093e81419d59308fe4 Mon Sep 17 00:00:00 2001 From: sipp11 Date: Wed, 18 Nov 2015 05:10:05 +0700 Subject: [PATCH] Gulp implemented --- css/_colors.styl | 3 + css/_normalize.styl | 9 + css/_typography.styl | 25 ++ css/style.styl | 292 ++++++++++++++++++ gulpfile.js | 111 +++++++ index.html | 1 + package.json | 11 + src/app.jsx | 1 - ...thenticatedApp.jsx => AuthenticatedApp.js} | 0 ...omponent.jsx => AuthenticatedComponent.js} | 0 src/components/{Home.jsx => Home.js} | 0 src/components/{Login.jsx => Login.js} | 0 src/components/{Quote.jsx => Quote.js} | 0 src/components/{Signup.jsx => Signup.js} | 0 14 files changed, 452 insertions(+), 1 deletion(-) create mode 100644 css/_colors.styl create mode 100644 css/_normalize.styl create mode 100644 css/_typography.styl create mode 100644 css/style.styl create mode 100644 gulpfile.js rename src/components/{AuthenticatedApp.jsx => AuthenticatedApp.js} (100%) rename src/components/{AuthenticatedComponent.jsx => AuthenticatedComponent.js} (100%) rename src/components/{Home.jsx => Home.js} (100%) rename src/components/{Login.jsx => Login.js} (100%) rename src/components/{Quote.jsx => Quote.js} (100%) rename src/components/{Signup.jsx => Signup.js} (100%) diff --git a/css/_colors.styl b/css/_colors.styl new file mode 100644 index 0000000..036c0da --- /dev/null +++ b/css/_colors.styl @@ -0,0 +1,3 @@ +orange = #F5A623 +red = #d12028 +green = #2DC22D diff --git a/css/_normalize.styl b/css/_normalize.styl new file mode 100644 index 0000000..7694ab0 --- /dev/null +++ b/css/_normalize.styl @@ -0,0 +1,9 @@ +// CSS Normalize + +article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button], input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} + +// clearfix +.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } + +// Sane border box +* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } diff --git a/css/_typography.styl b/css/_typography.styl new file mode 100644 index 0000000..ffc35e3 --- /dev/null +++ b/css/_typography.styl @@ -0,0 +1,25 @@ +html + font-size 62.5% + +body + background #D4D4D4 + -webkit-font-smoothing antialiased + -moz-osx-font-smoothing grayscale + font-family 'Open Sans', sans-serif + font-size 2rem + +h1 + text-align center + font-weight normal + margin 0 + +h2,h3,h4,h5,h6 + font-weight normal + +h2 + text-align center + margin-top 0 + margin-bottom 2rem + +h3 + font-size 3rem diff --git a/css/style.styl b/css/style.styl new file mode 100644 index 0000000..10eef76 --- /dev/null +++ b/css/style.styl @@ -0,0 +1,292 @@ +// Import all partials +@require './_*.styl' + +header.top + text-align center + h1 + font-size 14.4rem + line-height 0.7 // this font has a wacky baseline + display flex + justify-content: center; + + // This is a bunch of goofy CSS to make the logo look decent + .ofThe + display flex + font-size 3rem + color orange + justify-content: center; + align-items: center; + background url('images/anchor.svg') center no-repeat; + background-size cover + padding 0 1rem + .of + padding-right 2rem + position relative + right -0.5rem + h3 + margin 0 + font-size 2rem + color orange + position relative + display inline-block + span + background white + position relative + z-index 2 + padding-left 1rem + padding-right 1rem + &:before, &:after + display block + z-index 1 + background black + position absolute + width 130% + height 1px + content '' + top 5px + margin-left -15% + &:after + top auto + bottom 7px + + +.catch-of-the-day + display flex + height 90vh + max-width:1500px + margin 0 auto + margin-top 5vh + perspective: 1000; + transform-style preserve-3d + & > * + flex 1 4 auto + padding 2rem + border 1rem double lighten(black,10%) + position relative + background white + transition all 0.3s + box-shadow 0px 5px 5px rgba(0,0,0,0.1) + overflow scroll + &:first-child + flex-shrink 1 // take 4x the extra room + flex-basis 50% + transform translateX(50%) rotateY(6deg) translateX(-50%) + &:nth-child(2) + transform translateX(-50%) rotateY(-14deg) translateX(50%) + border-left 0 + border-right 0 + min-width 300px + &:last-child + flex-shrink 1 // take 4x the extra room + flex-basis 50% + transform translateX(-50%) rotateY(10deg) translateX(50%) scale(1.08) translateX(24px) + +// Folding Transforms +// Take off folding when not checked +input#fold:not(:checked) ~ #main + .catch-of-the-day > * + transform none + +label[for="fold"] + position absolute + top 1rem + left 1rem + text-transform uppercase + font-size 1.3rem + background black + color white + border 2px solid black + cursor pointer + padding 0.5rem 1rem + +input#fold + display none + &:checked + label + background white + color black + +ul + list-style none + margin 0 + padding 0 + +ul.order + li + border-bottom 1px solid black + padding 2rem 0 + display flex + font-size 1.4rem + justify-content space-between + align-items center + &:hover + // padding 1rem 0 + button + display inline + button + border 0 + display none + line-height 1 + padding 0 + &.total + font-weight 600 + border-bottom 3px solid black + border-top 3px double black + &.unavailable + text-decoration line-through + background lighten(red, 80%) + .price + font-size 1.2rem + span.count + position relative + overflow hidden + float left // only works if it's floated?! + span + display inline-block + // transition all 0.5s + +.order-title + text-align center + +.fish-edit + margin-bottom 20px + border 2px solid black + overflow hidden + display flex + flex-wrap wrap + input, textarea, select + width 33.33% + padding 10px + line-height 1 + font-size 1.2rem + border 0 + border-bottom 1px solid black + border-right 1px solid black + appearance none + border-radius 0 + background white + &:focus + outline 0 + background lighten(orange, 85%) + textarea + width 100% + input:last-of-type + width 100% + button + width 100% + border 0 + + +// Menu Styles +.list-of-fish + border-top 2px solid black + border-bottom 1px solid black + padding-top 5px + margin-top 2rem + transform translateZ(0); + +.menu-fish + border-bottom 2px solid black + border-top 1px solid black + padding-bottom 2rem + padding-top 2rem + margin-bottom 5px + clear both + overflow hidden + p + margin 0 + font-size 1.8rem + .fish-name + margin 0 + display flex + justify-content space-between + align-items center + .price + font-size 1.4rem + // color orange + justify-content flex-end + // font-family 'Open Sans Condensed' + img + float left + width 150px + margin-right 1rem + +button, input[type=submit] + text-transform uppercase + background none + border 1px solid black + font-weight 600 + font-size 1.5rem + font-family 'Open Sans' + transition all 0.2s + position relative + z-index 2 + &[disabled] + color red + background white + border-color red + transform rotate(-10deg) scale(2) translateX(50%) translateY(-50%) + &:hover + color red + cursor not-allowed + &:after + display none + &:after + content '' + z-index -1 + display block + background black + position absolute + width 100% + height 0% + left 0 + top 0 + transition all 0.2s + &:hover, &:focus + color white + outline 0 + &:after + height 100% + // variants + &.warning + &:after + background red + &.success + &:after + background green + + &.github, &.facebook, &.twitter + border 0 + display block + margin-bottom 2rem + width 100% + color white + padding 2rem + + &.github + background #82D465 + &:after + background darken(#82D465, 20%) + + &.facebook + background #3864A3 + &:after + background darken(#3864A3, 20%) + + &.twitter + background #5EA9DD + &:after + background darken(#5EA9DD, 20%) + + +// Store Selector +.store-selector + background white + max-width 500px + margin 50px auto + padding 2rem + border 2px solid black + input + width 100% + &[type="text"] + text-align center + font-size 3rem diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..41ce8aa --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,111 @@ +var source = require('vinyl-source-stream'); +var gulp = require('gulp'); +var gutil = require('gulp-util'); +var browserify = require('browserify'); +var babelify = require('babelify'); +var watchify = require('watchify'); +var notify = require('gulp-notify'); + +var stylus = require('gulp-stylus'); +var autoprefixer = require('gulp-autoprefixer'); +var uglify = require('gulp-uglify'); +var rename = require('gulp-rename'); +var buffer = require('vinyl-buffer'); + +var browserSync = require('browser-sync'); +var reload = browserSync.reload; +var historyApiFallback = require('connect-history-api-fallback') + + +/* + Styles Task +*/ + +gulp.task('styles',function() { + // move over fonts + + gulp.src('css/fonts/**.*') + .pipe(gulp.dest('build/css/fonts')) + + // Compiles CSS + gulp.src('css/style.styl') + .pipe(stylus()) + .pipe(autoprefixer()) + .pipe(gulp.dest('./build/css/')) + .pipe(reload({stream:true})) +}); + +/* + Images +*/ +gulp.task('images',function(){ + gulp.src('css/images/**') + .pipe(gulp.dest('./build/css/images')) +}); + +/* + Browser Sync +*/ +gulp.task('browser-sync', function() { + browserSync({ + // we need to disable clicks and forms for when we test multiple rooms + server : {}, + middleware : [ historyApiFallback() ], + ghostMode: false + }); +}); + +function handleErrors() { + var args = Array.prototype.slice.call(arguments); + notify.onError({ + title: 'Compile Error', + message: '<%= error.message %>' + }).apply(this, args); + this.emit('end'); // Keep gulp from hanging on this task +} + +function buildScript(file, watch) { + var props = { + entries: ['./src/' + file], + debug : true, + transform: [babelify.configure({ stage : 0 })], + cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify + }; + + // watchify() if watch requested, otherwise run browserify() once + var bundler = watch ? watchify(browserify(props)) : browserify(props); + + function rebundle() { + var stream = bundler.bundle(); + return stream + .on('error', handleErrors) + .pipe(source(file)) + .pipe(rename('build.js')) + .pipe(gulp.dest('./build/')) + // If you also want to uglify it + // .pipe(buffer()) + // .pipe(uglify()) + // .pipe(rename('app.min.js')) + // .pipe(gulp.dest('./build')) + .pipe(reload({stream:true})) + } + + // listen for an update and run rebundle + bundler.on('update', function() { + rebundle(); + gutil.log('Rebundle...'); + }); + + // run it once the first time buildScript is called + return rebundle(); +} + +gulp.task('scripts', function() { + return buildScript('app.jsx', false); // this will run once because we set watch to false +}); + +// run 'scripts' task first, then watch for future changes +gulp.task('default', ['images','styles','scripts','browser-sync'], function() { + gulp.watch('css/**/*', ['styles']); // gulp watch for stylus changes + return buildScript('app.jsx', true); // browserify watch for JS changes +}); diff --git a/index.html b/index.html index e96853c..cbdc783 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ React Browserify SPA seed + diff --git a/package.json b/package.json index f29db78..3ed262f 100644 --- a/package.json +++ b/package.json @@ -48,13 +48,24 @@ "browser-sync": "^2.1.6", "browserify": "^8.0.3", "clean-css": "^3.1.9", + "connect-history-api-fallback": "^1.1.0", "eslint": "^0.14.1", + "gulp": "^3.9.0", + "gulp-autoprefixer": "^3.1.0", + "gulp-notify": "^2.2.0", + "gulp-rename": "^1.2.2", + "gulp-stylus": "^2.1.0", + "gulp-uglify": "^1.5.1", + "gulp-util": "^3.0.7", "nodemon": "^1.5.0", + "reactify": "^1.1.1", "rework": "^1.0.1", "rework-npm": "^1.0.0", "rework-npm-cli": "^0.1.1", "serve": "^1.4.0", "uglify-js": "^2.4.15", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0", "watchify": "^2.1.1" } } diff --git a/src/app.jsx b/src/app.jsx index b9df510..bfc7bb7 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -28,4 +28,3 @@ if (jwt) { router.run(function (Handler) { React.render(, document.getElementById('content')); }); - diff --git a/src/components/AuthenticatedApp.jsx b/src/components/AuthenticatedApp.js similarity index 100% rename from src/components/AuthenticatedApp.jsx rename to src/components/AuthenticatedApp.js diff --git a/src/components/AuthenticatedComponent.jsx b/src/components/AuthenticatedComponent.js similarity index 100% rename from src/components/AuthenticatedComponent.jsx rename to src/components/AuthenticatedComponent.js diff --git a/src/components/Home.jsx b/src/components/Home.js similarity index 100% rename from src/components/Home.jsx rename to src/components/Home.js diff --git a/src/components/Login.jsx b/src/components/Login.js similarity index 100% rename from src/components/Login.jsx rename to src/components/Login.js diff --git a/src/components/Quote.jsx b/src/components/Quote.js similarity index 100% rename from src/components/Quote.jsx rename to src/components/Quote.js diff --git a/src/components/Signup.jsx b/src/components/Signup.js similarity index 100% rename from src/components/Signup.jsx rename to src/components/Signup.js