deployment build with systemjs-builder

8 files changed, 151 insertions, 45 deletions

diff --git a/frontend/.gitignore b/frontend/.gitignore
index 78a7a41..d645df8 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,4 +1,5 @@
 node_modules
-app/*.js
-app/*.js.map
+dist
+target
 typings
+app/*.js*
diff --git a/frontend/Rakefile b/frontend/Rakefile
new file mode 100644
index 0000000..321d422
--- /dev/null
+++ b/frontend/Rakefile
@@ -0,0 +1,81 @@
+require "fileutils"
+require "shellwords"
+
+def e(s) Shellwords.escape(s) end
+
+ENV["PATH"] = "./node_modules/.bin:#{ENV["PATH"]}"
+
+$root = File.expand_path("..", __FILE__)
+$destdir = ENV["DESTDIR"] || File.join($root, "target")
+
+$deps = [
+  "node_modules/es6-shim/es6-shim.min.js",
+  "node_modules/angular2/bundles/angular2-polyfills.js",
+  "node_modules/codemirror/lib/codemirror.css",
+]
+
+$copies = [
+  "index.html",
+  "poe.css",
+]
+
+$minify = <<EOF
+"use strict";
+const path = require("path");
+const Builder = require("systemjs-builder");
+
+const builder = new Builder("./", "./bootstrap.js");
+builder
+  .buildStatic("app/main", "#{$destdir}/bootstrap.js", { sourceMaps: false, minify: true, mangle: false, globalDefs: { ENV: "production" } })
+  .then(() => console.log("Build complete"))
+  .catch(err => {
+    console.log("Build error");
+    console.log(err);
+  });
+EOF
+
+task :deploy => [:prepare, :compile] do
+  FileUtils.mkdir_p($destdir)
+
+  puts "Building main bundle...."
+  system "echo #{e $minify} | node" || exit(1)
+
+  puts "Minifying dependencies...."
+  FileUtils.mkdir_p(File.join($destdir, "dist"))
+  $deps.each { |dep_|
+    dep = File.basename(dep_)
+    src = File.join($root, "dist", dep)
+    out = File.join($destdir, "dist", dep)
+    case dep
+    when /\.js$/
+      puts "uglifyjs #{dep}"
+      system "uglifyjs --compress --mangle -o #{e out} #{e src}" || exit(1)
+    when /\.css$/
+      puts "cleancss #{dep}"
+      system "cleancss -o #{e out} #{e src}" || exit(1)
+    else
+      raise "unknown file type: #{dep}"
+    end
+  }
+
+  puts "Copying static files...."
+  $copies.each { |copy|
+    puts "Copying #{copy}"
+    FileUtils.cp(File.join($root, copy), $destdir)
+  }
+end
+
+task :prepare do
+  dest = File.join($root, "dist")
+  FileUtils.mkdir_p(dest)
+
+  $deps.each { |dep|
+    puts "Copying #{dep} to #{dest}"
+    FileUtils.cp(File.join($root, dep), dest)
+  }
+end
+
+task :compile do
+  puts "Running tsc...."
+  system "tsc" || exit(1)
+end
diff --git a/frontend/app/app.component.ts b/frontend/app/app.component.ts
index d7e4060..d17c26a 100644
--- a/frontend/app/app.component.ts
+++ b/frontend/app/app.component.ts
@@ -1,6 +1,5 @@
 import {Component} from "angular2/core";
 import {Router, RouteParams} from "angular2/router";
-import {NgForm}    from 'angular2/common';
 import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
 import {HTTP_PROVIDERS} from 'angular2/http';
 
@@ -14,7 +13,6 @@ import {EditorComponent} from "./editor.component";
 @Component({
   selector: "my-app",
   template: `
-    {{diagnostic}}
     <div class="panel panel-default">
       <div class="panel-body">
         <form (ngSubmit)="onSubmit()">
@@ -33,7 +31,7 @@ import {EditorComponent} from "./editor.component";
     <router-outlet></router-outlet>
   `,
   directives: [ROUTER_DIRECTIVES, EditorComponent],
-  providers: [HTTP_PROVIDERS, SnippetService, EditingDataService],
+  providers: [SnippetService, EditingDataService],
 })
 @RouteConfig([
   { path: "/",      name: "Home",           component: HomeComponent },
diff --git a/frontend/app/editor.component.ts b/frontend/app/editor.component.ts
index 34adde4..162c1dc 100644
--- a/frontend/app/editor.component.ts
+++ b/frontend/app/editor.component.ts
@@ -1,5 +1,15 @@
 import {Component, OnInit, ElementRef, Input, Output, EventEmitter} from "angular2/core";
 import {EditingData, EditingDataService} from "./editing-data.service";
+import CodeMirror from "codemirror";
+import "codemirror/mode/ruby/ruby";
+import "codemirror/mode/php/php";
+import "codemirror/mode/htmlmixed/htmlmixed";
+import "codemirror/mode/xml/xml";
+import "codemirror/mode/css/css";
+import "codemirror/mode/clike/clike";
+import "codemirror/mode/javascript/javascript";
+import "codemirror/addon/edit/closebrackets";
+import "codemirror/addon/edit/matchbrackets";
 
 @Component({
   selector: "editor",
diff --git a/frontend/app/main.ts b/frontend/app/main.ts
index 0e51b87..737e308 100644
--- a/frontend/app/main.ts
+++ b/frontend/app/main.ts
@@ -1,10 +1,17 @@
+import "rxjs/Rx";
+
 import {bootstrap} from "angular2/platform/browser"
-import {ROUTER_PROVIDERS} from "angular2/router";
+import {enableProdMode, provide} from "angular2/core";
+import {ROUTER_PROVIDERS, APP_BASE_HREF} from "angular2/router";
 import {HTTP_PROVIDERS} from "angular2/http";
 
 import {AppComponent} from "./app.component"
-import {Snippet, SnippetService} from "./snippet.service";
 
-import "rxjs/Rx";
+declare var ENV: any;
+if (typeof ENV !== "undefined" && ENV === "production") enableProdMode();
 
-bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS, SnippetService]);
+bootstrap(AppComponent, [
+  ROUTER_PROVIDERS,
+  HTTP_PROVIDERS,
+  provide(APP_BASE_HREF, { useValue: "/" })
+]);
diff --git a/frontend/bootstrap.js b/frontend/bootstrap.js
new file mode 100644
index 0000000..7034cef
--- /dev/null
+++ b/frontend/bootstrap.js
@@ -0,0 +1,36 @@
+var xcb = function() {
+  System.config({
+    packages: {
+      app: {
+        format: "register",
+        defaultExtension: "js"
+      }
+    },
+    defaultJSExtensions: true,
+    paths: {
+      "*": "./node_modules/*",
+      "app/*": "./app/*",
+    },
+    bundles: {
+      "angular2/bundles/angular2.dev": ["angular2/core", "angular2/platform/browser", "angular2/common"],
+      "angular2/bundles/http.dev": ["angular2/http"],
+      "angular2/bundles/router.dev": ["angular2/router"],
+      "rxjs/bundles/Rx": ["rxjs/*"],
+    },
+    packageConfigPaths: ["./node_modules/*/package.json"],
+  });
+}
+
+if (typeof module === "undefined") {
+  var cb = function() {
+    xcb();
+    System.import("app/main").then(null, console.error.bind(console));
+  }
+
+  var tag = document.createElement("script");
+  tag.setAttribute("src", "node_modules/systemjs/dist/system.src.js");
+  tag.onload = cb;
+  document.head.appendChild(tag);
+} else {
+  xcb();
+}
diff --git a/frontend/index.html b/frontend/index.html
index 8e430f4..8cd5eda 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,44 +1,14 @@
 <!DOCTYPE html>
 <html lang="ja">
   <head>
-    <base href="/">
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
     <title>poe: online ruby environment</title>
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.11.0/codemirror.min.css">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/poe.css">
-    <script src="node_modules/codemirror/lib/codemirror.js"></script>
-    <script src="node_modules/codemirror/mode/ruby/ruby.js"></script>
-    <script src="node_modules/codemirror/mode/php/php.js"></script>
-    <script src="node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
-    <script src="node_modules/codemirror/mode/xml/xml.js"></script>
-    <script src="node_modules/codemirror/mode/css/css.js"></script>
-    <script src="node_modules/codemirror/mode/clike/clike.js"></script>
-    <script src="node_modules/codemirror/mode/javascript/javascript.js"></script>
-    <script src="node_modules/codemirror/addon/edit/closebrackets.js"></script>
-    <script src="node_modules/codemirror/addon/edit/matchbrackets.js"></script>
-
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
-    <script src="node_modules/angular2/bundles/http.dev.js"></script>
-    <script>
-      System.config({
-        packages: {        
-          app: {
-            format: "register",
-            defaultExtension: "js"
-          }
-        }
-      });
-      System.import("app/main")
-            .then(null, console.error.bind(console));
-    </script>
+    <link rel="stylesheet" href="dist/codemirror.css">
+    <link rel="stylesheet" href="poe.css">
+    <script src="dist/es6-shim.min.js"></script>
+    <script src="dist/angular2-polyfills.js"></script>
   </head>
   <body>
     <nav class="navbar navbar-default navbar-static-top">
@@ -52,5 +22,6 @@
       </div>
     </nav>
     <div class="container-fluid"><my-app>Loading...</my-app></div>
+    <script src="bootstrap.js"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index c6d1738..1aad9ce 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
+    "start": "concurrent \"npm run tsc:w\" \"npm run lite\"",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
@@ -17,15 +17,17 @@
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
-    "systemjs": "0.19.22",
+    "systemjs": "0.19.17",
     "zone.js": "0.5.15"
   },
   "devDependencies": {
+    "clean-css": "^3.4.10",
     "concurrently": "^2.0.0",
     "lite-server": "^2.1.0",
     "proxy-middleware": "^0.15.0",
     "typescript": "^1.8.2",
     "typings": "^0.6.8",
+    "uglify-js": "^2.6.2",
     "url": "^0.11.0"
   }
 }