Oliver Joseph Ash OliverJAsh

Given a complex dep graph, produce the defined output whilst demonstrating the following capabilities:

Intelligent watch. When building a Sass file, e.g. main.scss, the build tool should rebuild if I change any of the files in the dependency graph (e.g. main.scss using Sass’ @import to pull in foo.scss))
Piping source maps. E.g.: main.js -> uglify -> concat with foo.js -> bar.js. The output file, bar.js, should have a source map that maps back to main.js
Caching. E.g.: main.js -> uglify -> concat with foo.js -> bar.js. Since the last build, foo.js has changed but main.js has not. The build tool should re-use the previous uglify result.

The build tool can be reviewed by the config necessary for achieving the above. Perhaps you could achieve all of these with the naïvest of build tools, but in my opinion, the best tool will have the simplest result: a demonstration of all of the above without any config.

npm install
node traceur-runner.js main.js

	/eslint-env node/
	var jspm = require('jspm');
	var builder = new jspm.Builder();
	var crypto = require('crypto');
	var fs = require('fs');
	var path = require('path');
	var mkdirp = require('mkdirp');

	var System = require('jspm/node_modules/systemjs');

	@mixin foo {
	// styles
	}

	.foo {
	@include foo();
	}

	@media () {
	.bar {

	<script src="jspm_packages/system.js"></script>
	<script src="config.js"></script>
	<script>
	/* global System*/
	System.import('main');
	</script>

	/* jshint esnext: true */

	import fs from 'nodelibs/fs';
	import childProcess from 'nodelibs/child_process';

	console.log(1, fs);
	console.log(2, childProcess);

	/* jshint esnext: true */

	// `getStream` is some third party thing
	var stream = getStream();
	var events = Rx.fromEvent(stream, 'meta');

	stream.write('foo');
	// meta event fired by `stream`
	stream.write(null);

	/* jshint esnext: true */

	import { Client } from 'theseus';

	console.log(Client);