boom

.eslintrc.js

@@ -21,7 +21,7 @@ const origamiServicesConfig = merge({},
 			"no-console": "off",
 			"no-await-in-loop": "off",
 
-			"filenames/match-regex": [2, "^[a-z0-9-]+(\.test|(\.config(\.browserstack|\.dev|\.phantom|\.prod)?))?$", true],
+			"filenames/match-regex": [2, "^[a-z0-9-]+(\.test|(\.config(\.browserstack|\.dev|\.chrome|\.prod)?))?$", true],
 
 			"import/no-dynamic-require": "error",
 			"import/no-unresolved": "error",

README.md

@@ -15,9 +15,29 @@ If you have any issues with OBT, please check out [troubleshooting guide](https:
 
 ## Usage
 
-Run the install task for the first time will to install required dependencies:
-
-	origami-build-tools install
+	Usage
+		$ obt <command> [<options>]
+
+	Commands
+		build   Build CSS and JS in current directory
+		demo    Build demos into the demos directory
+		install Install npm and bower dependencies required to build modules
+		test    Run Origami specification tests and component specific tests
+		verify  Check folder and code structure follows Origami specification
+
+	Options
+		-h, --help                 Print out this message
+		--watch                    Re-run every time a file changes
+		--run-server               Build demos locally and runs a server
+		--js=<path>                Main JavaScript file (default: ./src/main.js)
+		--sass=<path>              Main Sass file (default: ./src/main.scss)
+		--build-js=<file>          Compiled JavaScript file (default: main.js)
+		--build-css=<file>         Compiled CSS file (default: main.css)
+		--build-folder=<dir>       Compiled assets directory (default: ./build/)
+		-v, --version              Print out version of origami-build-tools
+		--production               Compiled assets will be minified for production systems
+		--browserstack             Run tests using Browserstack instead of Chrome Stable
+		--standalone               Create a named export for the built JavaScript
 
 ### Developing products
 
@@ -32,28 +52,7 @@ automatically re-build the module's demos and assets every time a file changes:
 
 	origami-build-tools demo --runServer --watch
 
-## Tasks
-
-All the tasks are built using [gulp](http://gulpjs.com/), and almost all of them return a stream. They are structured in 5 higher level tasks, and each one has one or more subtasks.
-
-	Usage: origami-build-tools <command> [<options>]
-
-	Commands:
-	   install  Install system and local dependencies
-	   build    Build module in current directory
-	   demo     Build demos into the demos/ directory
-	   verify   Lint code and verify if module structure follows the Origami specification
-	   test     Test if Sass silent compilation follows the Origami specification
-
-	Most used options include:
-	   [--watch]                     Re-run every time a file changes
-	   [--run-server]                Build demos locally and runs a server
-	   [--updateorigami]             Update origami.json with the latest demo files created
-	   [--js=<path>]                 Main JavaScript file (default: ./src/main.js)
-	   [--sass=<path>]               Main Sass file (default: ./src/main.scss)
-	   [--build-js=<file>]           Compiled JavaScript file (default: main.js)
-	   [--build-css=<file>]          Compiled CSS file (default: main.css)
-	   [--build-folder=<dir>]        Compiled assets directory (default: ./build/)
+## Commands
 
 ### `install`
 
@@ -67,55 +66,36 @@ It comes with support for things like:
 
 * [Babel](https://github.com/babel/babel) so you can use ES2017 features in your modules and products
 * [autoprefixer](https://github.com/postcss/autoprefixer) so you don't have to worry about writing browser prefixes in your Sass
-* If `env` is set to `'production'`, JavaScript and CSS will be minified.
-
-Runs:
-
-* __js(config)__ Config accepts:
-	- js: `String` Path to your main JavaScript file. (Default: './main.js' and checks your bower.json to see if it's in its main key)
-	- buildJs: `String` Name of the built JavaScript bundle. (Default: 'main.js')
-	- buildFolder: `String` Path to directory where the built file will be created. If set to `'disabled'`, files won't be saved. (Default: './build/')
-	- env: `String` It can be either `'production'` or `'development'`. If it's `'production'`, it will minify the file. If it's `'development'`, it will generate a sourcemap. (Default: `'development'`)
-	- cwd: `String` The path to the working directory, in which the code to be built exists. (Default: `process.cwd()`)
-	- sourcemaps: `Boolean | 'inline'` Set to `true` to output sourcemaps as a separate file, even if env is `'production'`. Set to `'inline'` to output sourcemaps inline (Default: `false` in production, `true` in development)
-	- standalone: `String` Export built file to a global variable with the name passed to this.
-* __sass(config)__ Config accepts:
-	- sass: `String` Path to your main Sass file. (Default: `'./main.scss'` and checks your bower.json to see if it's in its main key)
-	- autoprefixerBrowsers: `Array` An array of strings of [browser names for autoprefixer](https://github.com/postcss/autoprefixer#browsers) to check what prefixes it needs. (Default: `["> 1%", "last 2 versions", "ie > 6", "ff ESR"]`)
-	- autoprefixerCascade: `Boolean` Whether autoprefixer should display CSS prefixed properties [cascaded](https://github.com/postcss/autoprefixer#visual-cascade) (Default: `false`)
-	- autoprefixerRemove: `Boolean` Remove unneeded prefixes (Default: `true`)
-	- cwd: `String` The path to the working directory, in which the code to be built exists. (Default: `process.cwd()`)
-	- buildCss: `String` Name of the built CSS bundle. (Default: `'main.css'`)
-	- buildFolder: `String` Path to directory where the built file will be created. If set to `'disabled'`, files won't be saved. (Default: `'./build/'`)
-	- sourcemaps: `Boolean | 'inline'` Set to `true` to output sourcemaps as a separate file, even if env is `'production'`. Set to `'inline'` to output sourcemaps inline (Default: `false` in production, `true` in development)
-	- env: `String` It can be either `'production'` or `'development'`. If it's `'production'`, it will compile the Sass file with the `'compressed'` style option and will also run [clean-css](https://github.com/jakubpawlowicz/clean-css). (Default: `'development'`)
-	- sassIncludePaths: `Array` List of paths to search for Sass imports. (Default: `'[]'`)
 
-### `demo`
+Set the main JavaScript file with the `--js` option. _(default: ./src/main.js)_
+Set the main Sass file with the `--sass` option. _(default: ./src/main.scss)_
+Set the name of the built JS file with the `--build-js` option. _(default: main.js)_
+Set the name of the built CSS file with the `--build-css` option. _(default: main.css)_
+Set the name of the folder to store the built CSS and JS with the `--build-folder` option. _(default: ./build/)_
+Build the files for production environments with the `--production` option. _(default: off)_
 
-Build demos found in the [demo config file](http://origami.ft.com/docs/component-spec/modules/#demo-config).
+If building a library use the `--standalone` option to specify the name you want the library to be accessed with. _(default: off)_
 
-Config:
+### `demo`
 
-* dist: `Boolean` Builds demo HTML for the build service. Default: `false`
-* runServer: `Boolean` Whether you want to run a local server or not. Default: `false`
-* livereload: `Boolean` Will enable livereload on `runServer`. Default: `true`
-* demoFilter: `Array` List of files for OBT to build. If the array is empty or `undefined`, it will build all demos. This is something only used in the [build service](https://origami-build.ft.com). Default: `undefined`
-* cwd: `String` The path to the working directory, in which the code to be built exists. (Default: `process.cwd()`)
+Build demos found in the [demo config file](http://origami.ft.com/docs/component-spec/modules/#demo-config).
 
-Dist demos consist of only HTML, with build service URLs for static resources, and are created in `demos/`.
+* If `--production` is set, demos are built to pull assets through the Origami Build Service.
 
-Local demos consist of HTML, CSS and JS (if Sass & JS exists), and are created in `demos/local/`. These files should not be committed. It is recommended to add _demos/local/_ to your `.gitignore`.
+Non-production demos consist of HTML, CSS and JS (if Sass & JS exists), and are created in `demos/local/`. These files should not be committed. It is recommended to add _demos/local/_ to your `.gitignore`.
 
 ### `verify`
 
 Lints JavaScript, Sass and configuration files against [Origami coding standards](http://origami.ft.com/docs/syntax/).
 
 ### `test`
 
+Run Origami specification tests and component specific tests.
+
 Checks Sass supports [silent and non-silent compilation modes](http://origami.ft.com/docs/syntax/scss/#silent-styles).
-If `pa11y.html` demo exists, confirms it is accessible.
+If `pa11y.html` demo exists, confirms it is accessible using [Pa11y](http://pa11y.org/).
 If `package.json` contains a `test` script, confirms it exits with a 0 exit code.
+Runs tests using [Karma](https://karma-runner.github.io) defaulting to Chrome Stable, can be configured to use BrowserStack by using the `--browserstack` flag.
 
 ## Migration guide
 

config/karma.config.phantom.js → config/karma.config.chrome.js

@@ -6,7 +6,7 @@ module.exports = function (config) {
 		{},
 		karmaBaseConfig,
 		{
-			browsers: ['PhantomJS'],
+			browsers: ['ChromeHeadless'],
 			logLevel: config.LOG_DISABLE
 		}
 	);

config/karma.config.js

@@ -18,7 +18,7 @@ module.exports = {
 	browserNoActivityTimeout: 60 * 1000, // default 10000
 
 	// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-	browsers: ['PhantomJS'],
+	browsers: ['ChromeHeadless'],
 
 	client: {
 		// Capture all console output and pipe it to the terminal.
@@ -47,9 +47,9 @@ module.exports = {
 	plugins: [
 		'karma-mocha',
 		'karma-sinon',
-		'karma-phantomjs-launcher',
 		'karma-webpack',
 		'karma-browserstack-launcher',
+		'karma-chrome-launcher',
 		'karma-sourcemap-loader'
 	],
 

config/webpack.config.dev.js

@@ -3,7 +3,8 @@ const webpackMerge = require('webpack-merge');
 
 const devConfig = {
 	plugins: [
-		new webpack.NamedModulesPlugin()
+		new webpack.NamedModulesPlugin(),
+		new webpack.NormalModuleReplacementPlugin(/^sinon$/,require.resolve('sinon'))
 	],
 	devtool: 'inline-source-map'
 };

config/webpack.config.js

@@ -52,16 +52,19 @@ module.exports = {
 			// Process JS with Babel.
 			{
 				test: /\.js$/,
+				exclude: /node_modules/,
 				use: [
 					// Disables AMD module loading and swaps requireText() for require()
 					'imports-loader?define=>false&requireText=>require',
 					{
 						loader: 'babel-loader',
 						options: {
+							compact: false,
 
 							// TODO: Look into using preset-env instead and specifying our minimum versions
 							// for enhanced experience instead of making everything become ES5
 							presets: [
+								require.resolve('babel-preset-es3'),
 								require.resolve('babel-preset-es2015'),
 								require.resolve('babel-preset-es2016'),
 								require.resolve('babel-preset-es2017')

lib/helpers/command-line.js

@@ -3,15 +3,26 @@
 const execa = require('execa');
 const process = require('process');
 
-function run(command, args, streams) {
-	const result = execa(command, args);
-	const stdout = streams && streams.stdout !== undefined ? streams.stdout : process.stdout;
-	const stderr = streams && streams.stderr !== undefined ? streams.stderr : process.stderr;
-	if (stdout) {
-		result.stdout.pipe(stdout);
+function run(command, args, options) {
+	options = options || {};
+	const opts = {
+		cwd: options.cwd || process.cwd()
+	};
+	if (options && options.stdout === undefined && options.stderr === undefined) {
+		opts.stdio = 'inherit';
 	}
-	if (stderr) {
-		result.stderr.pipe(stderr);
+	const result = execa(command, args, opts);
+	if (options && options.stdout === undefined) {
+		options.stdout = process.stdout;
+	}
+	if (options && options.stderr === undefined) {
+		options.stderr = process.stderr;
+	}
+	if (options.stdout && !opts.stdio) {
+		result.stdout.pipe(options.stdout);
+	}
+	if (options.stderr && !opts.stdio) {
+		result.stderr.pipe(options.stderr);
 	}
 	return result;
 }

lib/helpers/files.js

@@ -32,17 +32,17 @@ function getPackageJson(cwd) {
 	return requireIfExists(path.join(cwd, '/package.json'));
 }
 
-function packageJsonExists() {
-	return fileExists(path.join(process.cwd(), '/package.json'));
+function packageJsonExists(cwd) {
+	return fileExists(path.join(cwd || process.cwd(), '/package.json'));
 }
 
 function getBowerJson(cwd) {
 	cwd = cwd || process.cwd();
 	return requireIfExists(path.join(cwd, '/bower.json'));
 }
 
-function bowerJsonExists() {
-	return fileExists(path.join(process.cwd(), '/bower.json'));
+function bowerJsonExists(cwd) {
+	return fileExists(path.join(cwd || process.cwd(), '/bower.json'));
 }
 
 function getMainSassPath(cwd) {