From 2da8c75fa11c9b8762232a00063421a68a8ac723 Mon Sep 17 00:00:00 2001 From: nagn Date: Sat, 26 Sep 2015 21:11:43 -0400 Subject: [PATCH] Implemented Browserify; Now we run the server with gulp serve --- .editorconfig | 11 ++++++ .gitignore | 3 +- gulpfile.js | 67 ++++++++++++++++++++++++++++++++++-- package.json | 17 +++++++++ public/index.html | 2 +- public/js/main.js | 27 ++------------- public/js/map-application.js | 30 ++++++++++++++++ 7 files changed, 129 insertions(+), 28 deletions(-) create mode 100644 .editorconfig create mode 100644 public/js/map-application.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..a804551 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +# http://editorconfig.org + +root = true + +[*] +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +charset = utf-8 +indent_style = space +indent_size = 2 diff --git a/.gitignore b/.gitignore index b512c09..d1c1dbe 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +bundle.js diff --git a/gulpfile.js b/gulpfile.js index f36ec05..a47a11e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,6 +1,69 @@ +var _ = require('lodash'); var gulp = require('gulp'); +var browserify = require('browserify'); +var watchify = require('watchify'); +var transform = require('vinyl-transform'); +var buffer = require('vinyl-buffer'); +var shimify = require('browserify-shim'); +var source = require('vinyl-source-stream'); +var plumber = require('gulp-plumber'); +var uglify = require('gulp-uglify'); +var size = require('gulp-size'); +var sourcemaps = require('gulp-sourcemaps'); +var notifier = require('node-notifier'); +var util = require('gulp-util'); +var gulpif = require('gulp-if'); +var browserSync = require('browser-sync'); +var spawn = require('child_process').spawn; -gulp.task('default',function(){ - console.log('hello'); + +var appBundle = browserify({ + entries: './public/js/main.js', +}); + +function bundle() { + if (process.env.NODE_ENV === 'production') { + console.log('watchify: rebuilding bundle'); + } + return appBundle + .bundle() + .on('error', function(err) { + console.log('Error: ' + err.message); + }) + .pipe(source('bundle.js')) + .pipe(buffer()) + .pipe(sourcemaps.init({ loadMaps: true })) + .pipe(gulpif(process.env.NODE_ENV === 'production', uglify())) + .pipe(size({ + showFiles: true, + gzip: true, + title: 'js' + })) + .pipe(sourcemaps.write()) + .pipe(gulp.dest('./public/')) + .pipe(browserSync.reload({ stream: true })); +} + +appBundle.on('update', bundle); + +gulp.task('browserify', function() { + if (process.env.NODE_ENV !== 'production') { + appBundle = watchify(appBundle); + } + bundle(); }); +gulp.task('serve', ['browserify'], function() { + var server = spawn('node', ['server.js']); + + server.stdout.on('data', function(data) { + console.log('' + data); + }); + server.stderr.on('data', function(data) { + console.log('ERR: ' + data); + }); + + server.on('close', function(code) { + console.log('child process exited with code ' + code); + }); +}); diff --git a/package.json b/package.json index 44a7920..20cb955 100644 --- a/package.json +++ b/package.json @@ -17,14 +17,26 @@ "babel": "^5.6.23", "bluebird": "^2.10.1", "body-parser": "^1.14.0", + "browser-sync": "^2.9.6", + "browserify": "^11.2.0", + "browserify-shim": "^3.8.10", "colors": "^1.1.2", "compression": "^1.5.1", "express": "^4.13.1", "gulp": "^3.9.0", + "gulp-if": "^1.2.5", + "gulp-plumber": "^1.0.1", + "gulp-size": "^2.0.0", + "gulp-sourcemaps": "^1.5.2", + "gulp-uglify": "^1.4.1", + "gulp-util": "^3.0.6", "leaflet": "^0.7.5", "leaflet.locatecontrol": "^0.45.0", + "lodash": "^3.10.1", + "moment": "^2.10.6", "mongoose": "^4.0.7", "morgan": "^1.6.1", + "node-notifier": "^4.3.1", "react": "^0.13.3", "react-router": "^0.13.3", "request": "^2.58.0", @@ -34,6 +46,11 @@ "swig": "^1.4.2", "twit": "^2.1.0", "underscore": "^1.8.3", + "uniq": "^1.0.1", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0", + "vinyl-transform": "^1.0.0", + "watchify": "^3.4.0", "xml2js": "^0.4.9" }, "devDependencies": { diff --git a/public/index.html b/public/index.html index fac1ea6..bb5756b 100644 --- a/public/index.html +++ b/public/index.html @@ -11,4 +11,4 @@
- + diff --git a/public/js/main.js b/public/js/main.js index 2c993a3..bf1cb4e 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -1,27 +1,6 @@ +var MapApp = require('./map-application'); + function start() { - var map = L.map('map').setView([33.777220,-84.3962800], 13); - L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { - attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', - maxZoom: 18, - id: 'michaellin.cif0wpatz19s2sxlv8x48i66b', - accessToken: 'pk.eyJ1IjoibWljaGFlbGxpbiIsImEiOiJjaWYwd3BjMGkxOTFtc2FsdXA1aThhMmtvIn0.mdvxgPl2QX1hGygZgQjIlg' - }).addTo(map); - L.control.locate().addTo(map); - var data = $.ajax({ - url: "/events", - data: {"lat" : 33.777220, - "lng": -84.3962800, - "distance": 2000}, - success: function (data) { - console.log(data); - for (event in data.events) { - if (data.events[event].venueLocation) { - var marker = L.marker([data.events[event].venueLocation.latitude,data.events[event].venueLocation.longitude]).addTo(map); - marker.bindPopup(data.events[event].eventName); - } - } - }, - dataType: "json" - }); + var mapApp = new MapApp(); } start(); diff --git a/public/js/map-application.js b/public/js/map-application.js new file mode 100644 index 0000000..8b5865c --- /dev/null +++ b/public/js/map-application.js @@ -0,0 +1,30 @@ +var moment = require('moment'); +module.exports = function MapApp() { + var map = L.map('map').setView([33.777220,-84.3962800], 13); + L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { + attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', + maxZoom: 18, + id: 'michaellin.cif0wpatz19s2sxlv8x48i66b', + accessToken: 'pk.eyJ1IjoibWljaGFlbGxpbiIsImEiOiJjaWYwd3BjMGkxOTFtc2FsdXA1aThhMmtvIn0.mdvxgPl2QX1hGygZgQjIlg' + }).addTo(map); + L.control.locate().addTo(map); + var data = $.ajax({ + url: "/events", + data: {"lat" : 33.777220, + "lng": -84.3962800, + "distance": 2000}, + success: function (data) { + console.log(data); + for (event in data.events) { + if (data.events[event].venueLocation) { + var marker = L.marker([data.events[event].venueLocation.latitude,data.events[event].venueLocation.longitude]).addTo(map); + var time = moment(data.events[event].eventStarttime); + var timeString = time.format("dddd, MMMM Do YYYY, h:mm:ss a"); + marker.bindPopup("
" + data.events[event].eventName + "
" + timeString); + + } + } + }, + dataType: "json" + }); +}