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/package.json b/package.json index f29db78..0b805ac 100644 --- a/package.json +++ b/package.json @@ -49,12 +49,22 @@ "browserify": "^8.0.3", "clean-css": "^3.1.9", "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/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