Add when to template

README.md

@@ -2,39 +2,57 @@
 
 Clearhead Gulp Extension
 
-#### Current ###
+## Features
 
 * Browserify + Babelify ES6 Code
 * Handles Optimizely's Force / Safe Loop
 * Minifies where approriate
 * `gulp` watches by default
-* `npi` auto runs / starts when .npirc file exists [(github)](https://github.com/clearhead/node-proxy-injector)
+* Runs `npi` to proxy built files into live site [(github/npi)](https://github.com/clearhead/node-proxy-injector)
 * SASS/CSS/HTML importable as strings `$('body').append(require('./exp.html'));`
 
-#### Roadmap ###
-
-* Optimizely API Sync / Upload
-
 ## Installation
 
 `npm install --save-dev gulp-clearbuild`
 
-## Usage
+Create an experiment project directory and run the helper scaffolding function:
+
+```bash
+# before: mkdir exp-name && cd exp-name
+bash <(curl -sL http://git.io/v3Z6O) # ./init.sh
+```
+
+## ./test as an example
+
+Clone down the rep, `cd test/`, `gulp`, then `open localhost:8000`!
 
 ```js
-/*jshint unused:false*/
-import _gulp from 'gulp';
-import clearbuild from 'gulp-clearbuild';
-const gulp = clearbuild(_gulp);
+/* _optimizely_evaluate=force */ /*global $*/
+import html from './v1.html';
+import css from './v1.scss';
+window.expX = { html, css };
+/* _optimizely_evaluate=safe */
+$('head').append('<style>'+expX.css+'</style>');
+$('body').append(expX.html);
 ```
 
-OR as a helper function:
+`$ gulp # watch:`
 
-```bash
-# before: mkdir exp-name && cd exp-name
-bash <(curl -s https://raw.githubusercontent.com/clearhead/gulp-clearbuild/master/init.sh)
+```js
+/* _optimizely_evaluate=force */
+/*jshint ignore:start*/ !function r(e,t,n){function o(i,f){if(!t[i]){if(!e[i]){var s="function"==typeof require&&require;if(!f&&s)return s(i,!0);if(u)return u(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var l=t[i]={exports:{}};e[i][0].call(l.exports,function(r){var t=e[i][1][r];return o(t?t:r)},l,l.exports,r,e,t,n)}return t[i].exports}for(var u="function"==typeof require&&require,i=0;i<n.length;i++)o(n[i]);return o}({1:[function(r,e,t){e.exports='<div id="expx">Hello World</div>\n'},{}],2:[function(r,e,t){"use strict";function n(r){return r&&r.__esModule?r:{"default":r}}var o=r("./v1.html"),u=n(o),i=r("./v1.scss"),f=n(i);window.expX={html:u["default"],css:f["default"]}},{"./v1.html":1,"./v1.scss":3}],3:[function(r,e,t){e.exports="#expx {\n  foo: bar; }\n"},{}]},{},[2]); /*jshint ignore:end*/
+/* _optimizely_evaluate=safe */
+$('head').append('<style>' + expX.css + '</style>');
+$('body').append(expX.html);
 ```
 
-## Demo
+#### Roadmap ###
+
+* Optimizely API Sync / Upload
 
-Clone down the repo, CD into ./test, then `gulp` it up.
+## Usage
+
+```js
+/*jshint unused:false*/
+var gulp = require('gulp-clearbuild')(require('gulp'));
+```

init.sh

@@ -3,9 +3,7 @@
 touch gulpfile.babel.js
 
 echo "/*jshint unused:false*/" >> gulpfile.babel.js
-echo "import _gulp from 'gulp';" >> gulpfile.babel.js
-echo "import clearbuild from 'gulp-clearbuild';" >> gulpfile.babel.js
-echo "const gulp = clearbuild(_gulp);" >> gulpfile.babel.js
+echo "var gulp = require('gulp-clearbuild')(require('gulp'));" >> gulpfile.babel.js
 
 mkdir src
 
@@ -15,13 +13,14 @@ touch src/v1.scss
 echo "#expx{foo:bar;}" >> src/v1.scss
 touch src/v1.js
 echo "/* _optimizely_evaluate=force */ /*global \$*/" >> src/v1.js
+echo "import when from 'clearhead/when';" >> src/v1.js
 echo "import html from './v1.html';" >> src/v1.js
 echo "import css from './v1.scss';" >> src/v1.js
-echo "window.expX = { html, css };" >> src/v1.js
+echo "$('head').append('<style>'+css+'</style>');" >> src/v1.js
+echo "when('#selector-available-after-dom-ready', function($el){" >> src/v1.js
+echo "  $el.append(html);" >> src/v1.js
+echo "});" >> src/v1.js
 echo "/* _optimizely_evaluate=safe */" >> src/v1.js
-echo "\$('head').append('<style>'+expX.css+'</style>');" >> src/v1.js
-echo "\$('body').append(expX.html);" >> src/v1.js
-
 echo "
 
 SUCCESS!!! Now run