feature: allow custom result types

adds built-in result types: html, jsx and plain. Default is html.
new example using react.js
Fixes #9

Author: chmontgomery

bin/startExpressApp.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+__DIRNAME="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+$__DIRNAME/../examples/express-app-using-result-json/bin/www

bin/startReactTutorial.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+__DIRNAME="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+node "$__DIRNAME/../examples/react-tutorial/server.js"

examples/custom-result/bundle.config.js

@@ -0,0 +1,57 @@
+// default result type is "html"
+
+module.exports = {
+  bundle: {
+    base: {
+      scripts: './scripts/base.js',
+      styles: './styles/base.css',
+      options: {
+        rev: false,
+        uglify: false, // this has to be false, otherwise uglify will blow up when trying to parse a .jsx file
+        result: {
+          type: {
+            scripts: 'jsx',
+            styles: 'html'
+          }
+        }
+      }
+    },
+    default: {
+      scripts: './scripts/default.js',
+      styles: './styles/default.css',
+      options: {
+        rev: false,
+        result: {
+          type: 'html' // applies to both scripts and styles
+        }
+      }
+    },
+    plain: {
+      scripts: './scripts/plain.js',
+      styles: './styles/plain.css',
+      options: {
+        rev: false,
+        result: {
+          type: 'plain'
+        }
+      }
+    },
+    custom: {
+      scripts: './scripts/custom.js',
+      styles: './styles/custom.css',
+      options: {
+        rev: false,
+        result: {
+          type: {
+            scripts: function xJavascript(path) {
+              return "<script async src='" + path + "' type='application/javascript'></script>";
+            },
+            styles: function html(path) {
+              return "<link href='" + path + "' type='text/html'/>";
+            }
+          }
+        }
+      }
+    }
+  }
+};

examples/custom-result/bundle.result.json

@@ -0,0 +1,18 @@
+{
+  "base": {
+    "scripts": "<script src='/public/base.js' type='text/jsx'></script>",
+    "styles": "<link href='/public/base.css' media='screen' rel='stylesheet' type='text/css'/>"
+  },
+  "plain": {
+    "scripts": "/public/plain.js",
+    "styles": "/public/plain.css"
+  },
+  "default": {
+    "styles": "<link href='/public/default.css' media='screen' rel='stylesheet' type='text/css'/>",
+    "scripts": "<script src='/public/default.js' type='text/javascript'></script>"
+  },
+  "custom": {
+    "scripts": "<script async src='/public/custom.js' type='application/javascript'></script>",
+    "styles": "<link href='/public/custom.css' type='text/html'/>"
+  }
+}

examples/custom-result/gulpfile.js

@@ -0,0 +1,17 @@
+var gulp = require('gulp'),
+  rimraf = require('gulp-rimraf'),
+  bundle = require('../../');
+
+gulp.task('bundle', ['clean'], function () {
+  return gulp.src('./bundle.config.js')
+    .pipe(bundle())
+    .pipe(bundle.results({
+      pathPrefix: '/public/'
+    }))
+    .pipe(gulp.dest('./public'));
+});
+
+gulp.task('clean', function () {
+  return gulp.src('./public', { read: false })
+    .pipe(rimraf());
+});

examples/custom-result/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "custom-result",
+  "version": "0.0.0",
+  "description": "",
+  "main": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "gulp": "^3.8.7",
+    "gulp-rimraf": "^0.1.0"
+  }
+}

examples/custom-result/public/base.css

@@ -0,0 +1,59 @@
+# Custom Results
+
+You can define, down to each bundle file line, how your `bundle.result.json` is created. Either use the built in 
+result type functions or use a custom one to change or add attributes.
+
+### Built-in
+
+Options: `jsx | html | plain`
+
+Default: `html`
+
+```js
+bundle: {
+  base: {
+    scripts: './scripts/base.js',
+    styles: './styles/base.css',
+    options: {
+      rev: false,
+      uglify: false, // this has to be false, otherwise uglify will blow up when trying to parse a .jsx file
+      result: {
+        type: {
+          scripts: 'jsx',
+          styles: 'plain'
+        }
+      }
+    }
+  }
+}
+```
+
+### External
+
+Your function can do whatever you want, just make sure it has the following api
+
+Param: `{string} path - url path to the bundle`
+
+Returns: `{string} result line for this bundle`
+
+```js
+bundle: {
+  custom: {
+    scripts: './scripts/custom.js',
+    styles: './styles/custom.css',
+    options: {
+      rev: false,
+      result: {
+        type: {
+          scripts: function xJavascript(path) {
+            return "<script async src='" + path + "' type='application/javascript'></script>";
+          },
+          styles: function html(path) {
+            return "<link href='" + path + "' type='text/html'/>";
+          }
+        }
+      }
+    }
+  }
+}
+```

examples/custom-result/public/base.js

@@ -0,0 +1 @@
+var app = <Nav color="blue" />;

examples/custom-result/public/custom.css

@@ -0,0 +1 @@
+console.log("custom")

examples/custom-result/public/custom.js

@@ -0,0 +1 @@
+console.log("default")

examples/custom-result/public/default.css

@@ -0,0 +1 @@
+console.log("plain")

examples/custom-result/public/default.js

@@ -0,0 +1,3 @@
+.base {
+  background-color: blue;
+}

examples/custom-result/public/maps/base.css.map

@@ -0,0 +1,3 @@
+.custom {
+  background-color: blue;
+}

examples/custom-result/public/maps/base.js.map

@@ -0,0 +1,3 @@
+.default {
+  background-color: blue;
+}

examples/custom-result/public/maps/custom.css.map

@@ -0,0 +1,3 @@
+.plain {
+  background-color: blue;
+}

examples/custom-result/public/maps/custom.js.map

@@ -1,6 +1,6 @@
 {
   "article": {
-    "styles": "<link href='/public/article-103b3ca5.css' media='screen' rel='stylesheet' type='text/css'/>",
+    "styles": "<link href='/public/article-fb3e673f.css' media='screen' rel='stylesheet' type='text/css'/>",
     "scripts": "<script src='/public/article-0e717735.js' type='text/javascript'></script>"
   }
 }

examples/custom-result/public/maps/default.css.map

@@ -0,0 +1,12 @@
+# React comment box example
+
+This is the React comment box example from [the React tutorial](http://facebook.github.io/react/docs/tutorial.html).
+
+## To use
+
+```
+npm install
+node server.js
+```
+
+And visit http://localhost:3000/. Try opening multiple tabs!

examples/custom-result/public/maps/default.js.map

@@ -0,0 +1,18 @@
+module.exports = {
+  bundle: {
+    base: {
+      scripts: './scripts/example.js',
+      styles: './css/base.css',
+      options: {
+        rev: false,
+        uglify: false,
+        result: {
+          type: {
+            scripts: 'jsx',
+            styles: 'html'
+          }
+        }
+      }
+    }
+  }
+};

examples/custom-result/public/maps/plain.css.map

@@ -0,0 +1,6 @@
+{
+  "base": {
+    "styles": "<link href='/public/base.css' media='screen' rel='stylesheet' type='text/css'/>",
+    "scripts": "<script src='/public/base.js' type='text/jsx'></script>"
+  }
+}

examples/custom-result/public/maps/plain.js.map

@@ -0,0 +1,62 @@
+body {
+  background: #fff;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
+  font-size: 15px;
+  line-height: 1.7;
+  margin: 0;
+  padding: 30px;
+}
+
+a {
+  color: #4183c4;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background-color: #f8f8f8;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
+  font-size: 12px;
+  margin: 0 2px;
+  padding: 0px 5px;
+}
+
+h1, h2, h3, h4 {
+  font-weight: bold;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+h1 {
+  border-bottom: 1px solid #ddd;
+  font-size: 2.5em;
+  font-weight: bold;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+h2 {
+  border-bottom: 1px solid #eee;
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.5em;
+}
+
+h4 {
+  font-size: 1.2em;
+}
+
+p, ul {
+  margin: 15px 0;
+}
+
+ul {
+  padding-left: 30px;
+}