From 217d967e08d9bdcf80369e52b842213c162a90a1 Mon Sep 17 00:00:00 2001 From: Dan Seripap Date: Wed, 13 Jan 2016 09:28:10 -0500 Subject: [PATCH] Added browserify, es2015 to publicjs --- gulpfile.js | 23 +++++++++-- package.json | 8 +++- src/js/main.js | 109 ++++++++++++++++++++++++------------------------- 3 files changed, 81 insertions(+), 59 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 255c5c0..e61ed9a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,6 +1,12 @@ var gulp = require('gulp'); var uglify = require('gulp-uglify'); var nodemon = require('gulp-nodemon'); +var browserify = require('browserify'); +var babel = require('babelify'); +var source = require('vinyl-source-stream'); +var buffer = require('vinyl-buffer'); + +// var bundler = gulp.task('watch', function() { gulp.watch('src/js/main.js', ['build']); @@ -9,11 +15,22 @@ gulp.task('watch', function() { gulp.task('build', ['uglify']); gulp.task('uglify', function() { - gulp.src('src/js/main.js') + gulp.src('src/public/main.js') .pipe(uglify()) .pipe(gulp.dest('src/public')); }); +gulp.task('bundle', function() { + return browserify('src/js/main.js', { debug: true }).transform(babel.configure({ + presets: ["es2015"] + })).bundle() + .pipe(source('main.js')) + .pipe(buffer()) + .pipe(uglify()) + .pipe(gulp.dest('src/public')) + +}); + gulp.task('start', function() { nodemon({ script: 'index.js', @@ -22,6 +39,6 @@ gulp.task('start', function() { env: { 'NODE_ENV': 'development' }, - tasks: ['build'] + tasks: ['bundle'] }) -}) +}); diff --git a/package.json b/package.json index 1517b74..fe5f548 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "main": "index.js", "dependencies": { "babel": "^5.8.23", + "babelify": "^7.2.0", + "browserify": "^13.0.0", "compression": "^1.6.0", "connect-redis": "^3.0.1", "express": "^4.13.3", @@ -17,9 +19,13 @@ "shortid": "^2.2.4", "socket.io": "^1.4.0", "underscore": "^1.8.3", - "uuid": "^2.0.1" + "uuid": "^2.0.1", + "vinyl-buffer": "^1.0.0", + "vinyl-source-stream": "^1.1.0" }, "devDependencies": { + "babel-preset-es2015": "^6.3.13", + "compression": "^1.6.0", "gulp-nodemon": "^2.0.6" }, "scripts": { diff --git a/src/js/main.js b/src/js/main.js index 52d6f7e..a0f7385 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,54 +1,53 @@ -var fs = window.RequestFileSystem || window.webkitRequestFileSystem; +let fs = window.RequestFileSystem || window.webkitRequestFileSystem; + +window.favicon = new Favico({ + animation:'pop', + type : 'rectangle' +}); $(function() { - var isActive = false; - var newMessages = 0; - var FADE_TIME = 150; // ms - var TYPING_TIMER_LENGTH = 400; // ms - var COLORS = [ + let isActive = false; + let newMessages = 0; + let FADE_TIME = 150; // ms + let TYPING_TIMER_LENGTH = 400; // ms + let COLORS = [ '#e21400', '#91580f', '#f8a700', '#f78b00', '#58dc00', '#287b00', '#a8f07a', '#4ae8c4', '#3b88eb', '#3824aa', '#a700ff', '#d300e7' ]; - window.favicon = new Favico({ - animation:'pop', - type : 'rectangle' - }); + let $window = $(window); + let $usernameInput = $('.usernameInput'); // Input for username + let $messages = $('.messages'); // Messages area + let $inputMessage = $('.inputMessage'); // Input message input box + let $key = $('.key'); + let $genKey = $('.new_key'); + let $participants = $('#participants'); - // Initialize variables - var $window = $(window); - var $usernameInput = $('.usernameInput'); // Input for username - var $messages = $('.messages'); // Messages area - var $inputMessage = $('.inputMessage'); // Input message input box - var $key = $('.key'); - var $genKey = $('.new_key'); - var $participants = $('#participants'); + let $chatPage = $('.chat.page'); // The chatroom page - var $chatPage = $('.chat.page'); // The chatroom page - - var users = []; + let users = []; // Prompt for setting a username - var username; - var connected = false; - var typing = false; - var lastTypingTime; - var $currentInput = $usernameInput.focus(); - var encryptionKey; + let username; + let connected = false; + let typing = false; + let lastTypingTime; + let $currentInput = $usernameInput.focus(); + let encryptionKey; - var clipboard = new Clipboard('.copyable'); + let clipboard = new Clipboard('.copyable'); - var roomId = window.location.pathname.length ? window.location.pathname : null; + let roomId = window.location.pathname.length ? window.location.pathname : null; if (!roomId) return; - var socket = io(roomId); + let socket = io(roomId); $('#roomIdKey').text(roomId.replace('/', '')); function addParticipantsMessage (data) { - var message = ''; - var headerMsg = ''; + let message = ''; + let headerMsg = ''; $participants.text(data.numUsers); } @@ -81,7 +80,7 @@ $(function() { // Don't allow sending if key is empty if (!encryptionKey.trim().length) return; - var message = $inputMessage.val(); + let message = $inputMessage.val(); // Prevent markup from being injected into the message message = cleanInput(message); // if there is a non-empty message and a socket connection @@ -107,8 +106,8 @@ $(function() { // Log a message function log (message, options) { - var html = options && options.html === true || false; - var $el; + let html = options && options.html === true || false; + let $el; if (html) { $el = $('
  • ').addClass('log').html(message); } else { @@ -122,21 +121,21 @@ $(function() { if (!data.message.trim().length) return; // Don't fade the message in if there is an 'X was typing' - var $typingMessages = getTypingMessages(data); + let $typingMessages = getTypingMessages(data); options = options || {}; if ($typingMessages.length !== 0) { options.fade = false; $typingMessages.remove(); } - var $usernameDiv = $('') + let $usernameDiv = $('') .text(data.username) .css('color', getUsernameColor(data.username)); - var $messageBodyDiv = $('') + let $messageBodyDiv = $('') .html(data.message); - var typingClass = data.typing ? 'typing' : ''; - var $messageDiv = $('
  • ') + let typingClass = data.typing ? 'typing' : ''; + let $messageDiv = $('
  • ') .data('username', data.username) .addClass(typingClass) .append($usernameDiv, $messageBodyDiv); @@ -164,7 +163,7 @@ $(function() { // options.prepend - If the element should prepend // all other messages (default = false) function addMessageElement (el, options) { - var $el = $(el); + let $el = $(el); // Setup default options if (!options) { @@ -192,7 +191,7 @@ $(function() { // Prevents input from having injected markup function cleanInput (input) { - var message = $('
    ').html(input).text(); + let message = $('
    ').html(input).text(); message = Autolinker.link(message); return message; } @@ -207,8 +206,8 @@ $(function() { lastTypingTime = (new Date()).getTime(); setTimeout(function () { - var typingTimer = (new Date()).getTime(); - var timeDiff = typingTimer - lastTypingTime; + let typingTimer = (new Date()).getTime(); + let timeDiff = typingTimer - lastTypingTime; if (timeDiff >= TYPING_TIMER_LENGTH && typing) { socket.emit('stop typing'); typing = false; @@ -227,12 +226,12 @@ $(function() { // Gets the color of a username through our hash function function getUsernameColor (username) { // Compute hash code - var hash = 7; - for (var i = 0; i < username.length; i++) { + let hash = 7; + for (let i = 0; i < username.length; i++) { hash = username.charCodeAt(i) + (hash << 5) - hash; } // Calculate color - var index = Math.abs(hash % COLORS.length); + let index = Math.abs(hash % COLORS.length); return COLORS[index]; } @@ -259,7 +258,7 @@ $(function() { $inputMessage.on('input propertychange paste change', function() { updateTyping(); - var message = $(this).val().trim(); + let message = $(this).val().trim(); if (message.length) { $('#send-message-btn').addClass('active'); } else { @@ -273,7 +272,7 @@ $(function() { }); $genKey.click(function () { - var key = (Math.random() * Math.random()).toString(36).substring(7); + let key = (Math.random() * Math.random()).toString(36).substring(7); updateKeyVal(key); }); @@ -286,7 +285,7 @@ $(function() { users = data.users; - var key = (Math.random() * Math.random()).toString(36).substring(7); + let key = (Math.random() * Math.random()).toString(36).substring(7); if (data.numUsers > 1) { $('#join-modal').modal('show'); @@ -401,12 +400,12 @@ $(function() { } $('#join-modal .key').on('input propertychange paste change', function() { - var val = $(this).val().trim(); + let val = $(this).val().trim(); joinKeyInputChanged(val); }); $('#settings-modal input.key').on('input propertychange paste change', function() { - var val = $(this).val().trim(); + let val = $(this).val().trim(); if (val !== encryptionKey && val.length) { $('#settings-modal #save-key-edit').removeAttr('disabled'); } else { @@ -422,7 +421,7 @@ $(function() { function renderParticipantsList() { $('#participants-modal ul.users').empty(); _.each(users, function(username) { - var li; + let li; if (username === window.username) { // User is me li = $("
  • " + username + " (you)
    • ").css('color', getUsernameColor(username)); @@ -468,7 +467,7 @@ $(function() { } function saveKey() { - var key = $('.edit-key input.key').val().trim(); + let key = $('.edit-key input.key').val().trim(); if (!key.length) return; $('.edit-key').hide(); $('.read-key').show(); @@ -480,7 +479,7 @@ $(function() { }); function checkJoinKey() { - var key = $('#join-modal input').val().trim(); + let key = $('#join-modal input').val().trim(); if (!key.length) return; updateKeyVal(key); $('#join-modal').modal('hide');