Only serve items from out/dist on demand; use @import in CSS instead of lots of includes; configure r.js to optimize CSS too

app.build.js

@@ -8,6 +8,8 @@
     removeCombined: true,
     useStrict: true,
     mainConfigFile: "static/main.js",
+    skipDirOptimize: true,
+    optimizeCss: "standard",
     modules: [
         {
             name: "main"

app.js

@@ -46,7 +46,8 @@ var opts = nopt({
     'language': [String],
     'host': [String],
     'port': [Number],
-    'propDebug': [Boolean]
+    'propDebug': [Boolean],
+    'static': [String]
 });
 
 // Set default values for ommited arguments
@@ -55,6 +56,7 @@ var language = opts.language || "C++";
 var env = opts.env || ['dev'];
 var hostname = opts.host || os.hostname();
 var port = opts.port || 10240;
+var staticDir = opts.static || 'static';
 
 var propHierarchy = ['defaults'].concat(env).concat([language, os.hostname()]);
 console.log("properties hierarchy: " + propHierarchy);
@@ -419,9 +421,8 @@ findCompilers().then(function (compilers) {
     webServer
         .use(logger('combined'))
         .use(compression())
-        .use(sFavicon('static/favicon.ico'))
-        .use(sStatic('out/dist', {maxAge: staticMaxAgeMs}))
-        .use(sStatic('static', {maxAge: staticMaxAgeMs}))
+        .use(sFavicon(staticDir + '/favicon.ico'))
+        .use(sStatic(staticDir, {maxAge: staticMaxAgeMs}))
         .use(bodyParser.json())
         .use(restreamer())
         .get('/client-options.json', clientOptionsHandler(compilers, fileSources))

static/explorer.css

@@ -1,3 +1,9 @@
+@import url("ext/bootstrap/dist/css/bootstrap.min.css");
+@import url("ext/codemirror/lib/codemirror.css");
+@import url("ext/golden-layout/src/css/goldenlayout-base.css");
+@import url("ext/golden-layout/src/css/goldenlayout-light-theme.css");
+@import url("ext/selectize/dist/css/selectize.bootstrap2.css");
+
 .navbar {
     border-radius: 0px;
     margin-bottom: 5px;

static/index.html

@@ -5,11 +5,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="ext/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="ext/codemirror/lib/codemirror.css" rel="stylesheet">
-    <link href="ext/golden-layout/src/css/goldenlayout-base.css" rel="stylesheet">
-    <link href="ext/golden-layout/src/css/goldenlayout-light-theme.css" rel="stylesheet">
-    <link href="ext/selectize/dist/css/selectize.bootstrap2.css" rel="stylesheet">
     <link href="explorer.css" rel="stylesheet">
     <script data-main="main" src="ext/requirejs/require.js"></script>
 </head>