gulp stuff

.edditorconfig

@@ -0,0 +1,32 @@
+; http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.txt]
+insert_final_newline = false
+trim_trailing_whitespace = false
+
+[*.py]
+indent_size = 4
+
+[*.m]
+indent_size = 4
+
+[Makefile]
+indent_style = tab
+indent_size = 8
+
+[*.{js,json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.jshintrc

@@ -0,0 +1,37 @@
+{
+  "predef": [
+    "Promise",
+    "$"
+  ],
+  "globals": {
+      "$": false,
+    "MicroEvent": false
+  },
+  "node":true,
+  "browser": true,
+  "boss": true,
+  "curly": true,
+  "debug": false,
+  "devel": true,
+  "eqeqeq": true,
+  "evil": true,
+  "forin": false,
+  "immed": false,
+  "laxbreak": false,
+  "newcap": true,
+  "noarg": true,
+  "noempty": false,
+  "nonew": false,
+  "nomen": false,
+  "onevar": false,
+  "plusplus": false,
+  "regexp": false,
+  "undef": true,
+  "sub": true,
+  "strict": false,
+  "white": false,
+  "eqnull": true,
+  "esnext": true,
+  "unused": true,
+  "supernew":true
+}

app.js

@@ -14,12 +14,27 @@ logger.level = 'debug';
 // grab the url model
 const Url = require('./models/url');
 
+let isProduction = false;
+let sitePath = 'public';
+let index = 'views/index.html';
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'dev';
+
+if (process.env.NODE_ENV === 'prod') {
+  isProduction = true;
+  sitePath = 'live';
+  index = 'dist/index.html'
+}
+
+logger.warn(`isProduction:${isProduction}`);
+
+
 mongoose.connect('mongodb://' + config.db.host + '/' + config.db.name);
 app.use(compression());
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 
-app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, sitePath)));
 
 app.all('/*', function(req, res, next) {
   // CORS headers
@@ -35,7 +50,7 @@ app.all('/*', function(req, res, next) {
 });
 
 app.get('/', function(req, res){
-  res.sendFile(path.join(__dirname, 'views/index.html'));
+  res.sendFile(path.join(__dirname, index));
 });
 
 app.post('/api/v1/shorten', function(req, res){

gulpfile.js

@@ -0,0 +1,106 @@
+const gulp = require('gulp');
+const autoprefixer = require('gulp-autoprefixer');
+const cssnano = require('gulp-cssnano');
+const jshint = require('gulp-jshint');
+const uglify = require('gulp-uglify');
+const rename = require('gulp-rename');
+const concat = require('gulp-concat');
+const cache = require('gulp-cache');
+const htmlmin = require('gulp-htmlmin');
+const inject = require('gulp-inject');
+const del = require('del');
+const htmlreplace = require('gulp-html-replace');
+const stripDebug = require('gulp-strip-debug');
+const babel = require('gulp-babel');
+
+var fontOptions = { };
+
+gulp.task('appJS', function() {
+  return gulp.src(['public/javascripts/shorten.js'])
+     .pipe(stripDebug())
+    .pipe(jshint('.jshintrc'))
+    .pipe(jshint.reporter('default'))
+    .pipe(babel({presets: ['es2015']}))
+    .pipe(concat('nurl.js'))
+    .pipe(uglify({mangle: true, compress: {sequences: true,  // Join consecutive statemets with the “comma operator”
+          properties: true,  // Optimize property access: a["foo"] → a.foo
+          dead_code: true,  // Discard unreachable code
+          drop_debugger: true,  // Discard “debugger” statements
+          unsafe: false, // Some unsafe optimizations (see below)
+          conditionals: true,  // Optimize if-s and conditional expressions
+          comparisons: true,  // Optimize comparisons
+          evaluate: true,  // Evaluate constant expressions
+          booleans: true,  // Optimize boolean expressions
+          loops: true,  // Optimize loops
+          unused: true,  // Drop unused variables/functions
+          hoist_funs: true,  // Hoist function declarations
+          hoist_vars: false, // Hoist variable declarations
+          if_return: true,  // Optimize if-s followed by return/continue
+          join_vars: true,  // Join var declarations
+          cascade: true,  // Try to cascade `right` into `left` in sequences
+          side_effects: true,  // Drop side-effect-free statements
+          warnings: true,  // Warn about potentially dangerous optimizations/code
+          global_defs: {}     // global definitions
+        }}))
+    // .pipe(update(atob('LyogPT09PT09PQ0KDQpEZXZlbG9wZWQgYnkgTWFydGluIERvbm5lbGx5IG1hcnRpbmQyMDAwe2F0fWdtYWlsLmNvbQ0KDQo9PT09PT09ICovDQoNCg==')))
+    .pipe(gulp.dest('live/js'));
+});
+
+
+gulp.task('vendor', function() {
+    return gulp.src([
+                     'bower_components/zepto/zepto.min.js',
+                     'bower_components/mui/packages/cdn/js/mui.min.js'
+    ])
+        .pipe(concat('vendor.js'))
+        .pipe(uglify({mangle: false}))
+        .pipe(gulp.dest('live/js'));
+  });
+
+gulp.task('styles', function() {
+    return gulp.src(['public/css/roboto.css', 'bower_components/mui/packages/cdn/css/mui.min.css', 'public/css/styles.css'])
+        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
+        .pipe(cssnano())
+        .pipe(concat('app.css'))
+        .pipe(gulp.dest('live/css'));
+  });
+
+
+gulp.task('migrate', function() {
+  return gulp.src(['bower_components/mui/packages/cdn/css/mui.min.css'])
+    .pipe(gulp.dest('live/css'));
+});
+
+gulp.task('index', function() {
+
+    return gulp.src(['views/index.html'])
+        .pipe(htmlreplace({
+          mui: 'css/mui.min.css',
+          css: 'css/app.css',
+          js: 'js/nurl.js',
+          vendor: 'js/vendor.js'
+
+        }))
+        .pipe(htmlmin({removeComments: true, collapseWhitespace: true, keepClosingSlash: true}))
+
+        .pipe(gulp.dest('dist/'));
+  });
+
+
+
+
+gulp.task('clean', function() {
+  return del(['live']);
+});
+
+
+gulp.task('buildJS', function() {
+  gulp.start('appJS','vendor');
+});
+
+
+
+gulp.task('default', ['clean'], function() {
+  //gulp.start('buildJS','styles','index');
+    gulp.start('buildJS','styles', 'index');
+});

package.json

@@ -15,6 +15,7 @@
     "mongoose": "4.2.9"
   },
   "devDependencies": {
+    "babel-preset-es2015": "^6.24.1",
     "eslint": "^3.18.0",
     "eslint-config-defaults": "^9.0.0",
     "eslint-config-standard": "^7.1.0",
@@ -24,6 +25,7 @@
     "eslint-plugin-react": "^6.10.3",
     "eslint-plugin-standard": "^2.1.1",
     "eslint-watch": "^3.0.1",
+    "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-babel": "^6.1.2",
     "gulp-cache": "^0.4.6",
@@ -32,12 +34,15 @@
     "gulp-google-webfonts": "0.0.14",
     "gulp-html-replace": "^1.6.2",
     "gulp-htmlmin": "^3.0.0",
+    "gulp-inject": "^4.2.0",
     "gulp-jshint": "^2.0.4",
+    "gulp-jsmin": "^0.1.5",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-scss": "^1.4.0",
     "gulp-strip-debug": "^1.1.0",
     "gulp-uglify": "^2.1.2",
+    "jshint": "^2.9.5",
     "log4js": "^2.3.3"
   }
 }

public/css/roboto.css

@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsIPxuqWfQuZGbz5Rz4Zu1gk.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsENRpQQ4njX3CLaCqI4awdk.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsET2KMEyTWEzJqg9U8VS8XM.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsMH5J2QbmuFthYTFOnnSRco.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsDcCYxVKuOcslAgPRMZ8RJE.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsNKDSU5nPdoBdru70FiVyb0.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v14/Zd2E9abXLFGSr9G3YK2MsH4vxAoi6d67T_UKWi0EoHQ.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;
+}

public/javascripts/shorten.js

@@ -1,16 +1,14 @@
 $('#btn-shorten').on('click', function(){
-    console.log('Click');
-
   $.ajax({
     url: '/api/v1/shorten',
     type: 'POST',
     dataType: 'JSON',
     data: {url: $('#url-field').val()},
     success: function(data){
-        var resultHTML = '<a class="result" href="' + data.shortUrl + '">'
+        const $link = $('#link');
-            + data.shortUrl + '</a>';
+        const resultHTML = `<a class="result" href="${data.shortUrl}">${data.shortUrl}</a>`;
-        $('#link').html(resultHTML);
+        $link.html(resultHTML);
-        $('#link').hide().fadeIn('slow');
+        $link.hide().fadeIn('slow');
     }
   });
 

views/index.html

@@ -7,8 +7,10 @@
 
   <title>nURL</title>
   <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+  <!-- build:css-->
   <link rel="stylesheet" href="//cdn.muicss.com/mui-0.9.20/css/mui.min.css">
   <link href="css/styles.css" rel="stylesheet">
+  <!-- endbuild -->
 </head>
 <body>
 
@@ -28,8 +30,14 @@
   </div>
 </div>
 
-  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+  <!--<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>-->
+<!-- build:vendor -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+<!-- endbuild -->
+
+<!-- build:js -->
   <script src="javascripts/shorten.js"></script>
+<!-- endbuild -->
 </body>
 </html>

views/live-index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>nURL</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+  <link rel="stylesheet" href="css/mui.min.css">
+  <link href="css/app.css" rel="stylesheet">
+</head>
+<body>
+
+<div class="mui-container-fluid">
+  <div class="mui--text-display3">nURL</div>
+  <div class="mui--text-subhead">nurl.co</div>
+  <div class="mui-panel">
+    <form class="mui-form--inline">
+      <div class="mui-textfield">
+        <input id="url-field" placeholder="Paste a link...">
+      </div>
+      <button class="mui-btn mui-btn--raised mui-btn--accent" id="btn-shorten" type="button">SHORTEN</button>
+    </form>
+    <div class="mui-row">
+      <div class="mui-col-lg-12" id="link"></div>
+    </div>
+  </div>
+</div>
+
+<script src="js/vendor.js"></script>
+<script src="js/nurl.js"></script>
+</body>
+</html>