diff --git a/README.md b/README.md index 77efece..b5bf84b 100644 --- a/README.md +++ b/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(''); +$('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' + expX.css + ''); +$('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')); +``` diff --git a/init.sh b/init.sh index 35c54b4..6e086a3 100644 --- a/init.sh +++ b/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('');" >> 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('');" >> src/v1.js -echo "\$('body').append(expX.html);" >> src/v1.js - echo " SUCCESS!!! Now run