Adds minify tool for JS/JSON/CSS/XML/SQL - #1

Author: hirako2000

package.json

@@ -20,7 +20,7 @@
   "author": "Hirako2000",
   "license": "MIT",
   "scripts": {
-    "now-start": "exit 0",
+    "now-start": "exit 1",
     "now-build": "gulp build && cross-env NODE_ENV=production node .",
     "start": "cross-env NODE_ENV=dev browser-refresh .",
     "start:prod-test": "cross-env NODE_ENV=production node .",
@@ -37,10 +37,12 @@
     "babel-polyfill": "^6.7.2",
     "basscss": "^8.0.3",
     "bluebird": "^3.3.4",
+    "clean-css": "^4.1.9",
     "highlight.js": "^9.12.0",
     "isdev": "^1.0.1",
     "js-beautify": "^1.6.14",
     "jshashes": "^1.0.7",
+    "jsonminify": "^0.4.1",
     "koa": "^2.3.0",
     "koa-better-body": "^3.0.4",
     "koa-compress": "^2.0.0",
@@ -62,6 +64,7 @@
     "pretty-data": "^0.40.0",
     "shortid": "^2.2.8",
     "source-map-support": "^0.4.0",
+    "uglify-es": "^3.1.9",
     "winston": "^2.3.1"
   },
   "devDependencies": {

src/routes/header.marko

@@ -7,6 +7,9 @@ header
       span
         a href='/beautify' -- Beautify 
       span -- |
+      span
+        a href='/minify' -- Minify 
+      span -- |
       span
         a href='/paste' -- Paste 
       span -- |

src/routes/home/template.marko

@@ -8,6 +8,13 @@ include('../layout.marko')
           p -- Beautify de-obfuscates/formats pieces of code and syntax-highlight the result making it easier to read and understand...
           strong.p1 -- JavaScript/JSON - XML - HTML - CSS - SQL
 
+      div.col.col-12.p2
+        div.sm-col.lg-col-4.sm-col-12.md-col-4
+          a.btn.btn-huge href='/minify' -- Minify
+        div.sm-col.lg-col-8.sm-col-12.md-col-8.pt1.pb2
+          p -- Minify pieces of code to save space
+          strong.p1 -- JavaScript - JSON - XML - CSS - SQL
+
       div.col.col-12.p2
         div.sm-col.lg-col-4.sm-col-12.md-col-4
           a.btn.btn-huge href='/hash' -- Hash

src/routes/minify/index.js

@@ -0,0 +1,72 @@
+import {app} from 'server';
+import {post, get} from 'koa-route';
+import UglifyJS from 'uglify-es';
+import jsonminify from 'jsonminify';
+import CleanCSS from 'clean-css';
+import {pd} from 'pretty-data';
+import template from './template.marko';
+
+const javascript = 'JAVASCRIPT';
+const json = 'JSON';
+const xml = 'XML';
+const css = 'CSS';
+const sql = 'SQL';
+
+const formats = [javascript, json, xml, css, sql];
+
+const title = 'Minify - GisTeam';
+
+app.use(get('/minify', async ctx => {
+  ctx.body = template.stream({formats, title});
+  ctx.type = 'text/html';
+}));
+
+app.use(post('/minify', async ctx => {
+  const format = ctx.request.body.format;
+  const input = ctx.request.body.input;
+  let output;
+
+  switch (format) {
+    case javascript:
+      output = minifyJS(input);
+      break;
+    case json:
+      output = minifyJSON(input);
+      break;
+    case css:
+      output = minifyCSS(input);
+      break;
+    case sql:
+      output = pd.sqlmin(input);
+      break;
+    case xml:
+      output = pd.xml(input);
+      break;
+    case 'guess':
+      output = minifyJS(input);
+      break;
+    default:
+      output = minifyJS(input);
+  }
+
+  ctx.body = template.stream({format, formats, input, result: output, title});
+  ctx.type = 'text/html';
+}));
+
+function minifyJS(data) {
+  const out = UglifyJS.minify(data, {
+    compress: false, mangle: false
+  });
+  if (out.error) return 'Parsing Error, perhaps try JSON minifier...';
+  return out.code;
+}
+
+function minifyJSON(data) {
+  return jsonminify(data);
+}
+
+function minifyCSS(data) {
+  const output = new CleanCSS({}).minify(data);
+  if (!output || output.styles.length === 0) return 'No CSS in there...';
+  return output.styles;
+}

src/routes/minify/template.marko

@@ -0,0 +1,28 @@
+include('../layout.marko')
+  @content
+    div.pt2.pb4.pl3.pr3
+      form class='form' action='/minify' method='post'
+        div
+          p -- Input
+        div
+          p
+            select class="ui dropdown full-width" name='format'
+              for(format in data.formats)
+                if(format === data.format)
+                  option value='${format}' selected -- ${format}
+                else
+                  option value='${format}' -- ${format}
+        div
+          p
+            textarea class='textarea' name='input' rows="10"
+              if(data.input)
+                -- ${data.input}
+        div
+          p
+            button type="submit" class='btn full-width' onClick="" value="button"
+              -- MINIFY!
+      if(data.result)
+        div
+          p -- Output
+        pre
+          code -- ${data.result}

src/server.js

@@ -90,6 +90,7 @@ require('./routes/home');
 require('./routes/beautify');
 require('./routes/paste');
 require('./routes/hash');
+require('./routes/minify');
 
 /* Connect to MongoDB */
 const mongoHost = process.env.DB_HOST || config.mongodb.host;