Modernizing build dependencies (prebid#1355)

* Upgraded webpack, as well as some minor other build dependencies.

* Updated the yarn.lock file

* Migrated the module loaders to the 3.0 syntax.

* Ran yarn install. Moved the loader order around a bit.

* Made the unit tests and code coverage reports work with the new versions.

* Removed some unused lines, and fixed the coveralls task file location.

* Fixed the gulp coverage task so that it points to the right folder.

* Removed the JUnit reporter, which nobody seems to have reason to keep anymore.

* Removed the CI_MODE flag, and removed progress. This should help clean up the browserstack logs.

* Fixed gulp serve.

* Updated some more dependencies.

* Upgraded node to use version 7.

* Split gulp test and gulp test-coverage, so we can run tests without instrumnetation.

* Updated the yarn.lock

* Removed ie9 from the test browsers, since we dont support it anymore.

* Updated more dev dependency versions.

* Made travis use HeadlessChrome. Removed some extraneous code that nobody needs anymore.

* Better code reuse for launching browser tests.

* updated the yarn.lock file.

* Fixed a bug in the karma server callbacks, and made the logs from browserstack look good again.

* Added source maps, so that the line numbers on failed unit tests are right.

* Fixed a bug in the reporters code which causes Travis to fail.

* Updated README and some code style fixes.

* Fixed --watch, as well as a concurrency bug where several files mutate the webpack.conf file.

* Removed another unused dependency.

* Fixed the imports.

* Replaced all the src/file imports with ./file imports, to make things consistent

.nvmrc

@@ -1 +1 @@
-5.1
+7.0

.travis.yml

@@ -1,23 +1,17 @@
-sudo: required
 dist: trusty
 
 language: node_js
 
 node_js:
-  - "5.1"
+  - "7.0"
 
+# See https://docs.travis-ci.com/user/gui-and-headless-browsers/#Using-the-Chrome-addon-in-the-headless-mode
 addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable
+  chrome: stable
 
 before_install:
   - npm install -g gulp
-  - export CHROME_BIN=google-chrome
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
 
 script:
   - gulp run-tests

README.md

@@ -102,7 +102,26 @@ Having said that, you are probably safe to check your custom bundle into your pr
 
 ## Test locally
 
-To configure Prebid.js to run locally, edit the example file `./integrationExamples/gpt/pbjs_example_gpt.html`:
+To lint the code:
+
+```bash
+gulp lint
+```
+
+To run the unit tests:
+
+```bash
+gulp test
+```
+
+To generate and view the code coverage reports:
+
+```bash
+gulp test-coverage
+gulp view-coverage
+```
+
+For end-to-end testing, edit the example file `./integrationExamples/gpt/pbjs_example_gpt.html`:
 
 1. Change `{id}` values appropriately to set up ad units and bidders
 2. Set the path to Prebid.js in your example file as shown below (see `pbs.src`).
@@ -131,21 +150,21 @@ For deployment:
 })();
 ```
 
-To run the project locally, use:
+Build and run the project locally with:
 
-    $ gulp serve
+```bash
+gulp serve
+```
 
-This runs code quality checks, generates all the necessary files and starts a web server at `http://localhost:9999` serving from the project root. Navigate to your example implementation to test, and if your `prebid.js` file is sourced from the `./build/dev` directory you will have sourcemaps available in your browser's developer tools.
+This runs `lint` and `test`, then starts a web server at `http://localhost:9999` serving from the project root.
+Navigate to your example implementation to test, and if your `prebid.js` file is sourced from the `./build/dev`
+directory you will have sourcemaps available in your browser's developer tools.
 
 To run the example file, go to:
 
 + `http://localhost:9999/integrationExamples/gpt/pbjs_example_gpt.html`
 
-To view a test coverage report, go to:
-
-+ `http://localhost:9999/build/coverage/karma_html/report`
-
-A watch is also in place that will run continuous tests in the terminal as you edit code and tests.
+As you make code changes, the bundles will be rebuilt and the page reloaded automatically.
 
 <a name="Contribute"></a>
 

browsers.json

@@ -214,9 +214,5 @@
     "browser": "iphone",
     "device": "iPhone 6S",
     "browser_version": null
-  },
-  "Chrome_travis_ci": {
-    "base": "Chrome",
-    "flags": ["--no-sandbox"]
   }
 }

gulpfile.js

@@ -3,15 +3,17 @@
 var _ = require('lodash');
 var argv = require('yargs').argv;
 var gulp = require('gulp');
-var argv = require('yargs').argv;
 var gutil = require('gulp-util');
 var connect = require('gulp-connect');
-var webpack = require('webpack-stream');
+var path = require('path');
+var webpack = require('webpack');
+var webpackStream = require('webpack-stream');
 var uglify = require('gulp-uglify');
 var clean = require('gulp-clean');
-var karma = require('gulp-karma');
+var KarmaServer = require('karma').Server;
+var karmaConfMaker = require('./karma.conf.maker');
 var opens = require('open');
-var webpackConfig = require('./webpack.conf.js');
+var webpackConfig = require('./webpack.conf');
 var helpers = require('./gulpHelpers');
 var del = require('del');
 var gulpJsdoc2md = require('gulp-jsdoc-to-markdown');
@@ -26,10 +28,8 @@ var gulpif = require('gulp-if');
 var sourcemaps = require('gulp-sourcemaps');
 var fs = require('fs');
 
-var CI_MODE = process.env.NODE_ENV === 'ci';
 var prebid = require('./package.json');
 var dateString = 'Updated : ' + (new Date()).toISOString().substring(0, 10);
-var packageNameVersion = prebid.name + '_' + prebid.version;
 var banner = '/* <%= prebid.name %> v<%= prebid.version %>\n' + dateString + ' */\n';
 var analyticsDirectory = '../analytics';
 var port = 9999;
@@ -41,7 +41,7 @@ gulp.task('serve', ['lint', 'build-bundle-dev', 'watch', 'test']);
 
 gulp.task('serve-nw', ['lint', 'watch', 'e2etest']);
 
-gulp.task('run-tests', ['lint', 'test']);
+gulp.task('run-tests', ['lint', 'test-coverage']);
 
 gulp.task('build', ['build-bundle-prod']);
 
@@ -86,33 +86,47 @@ function bundle(dev) {
     .pipe(gulp.dest('build/' + (dev ? 'dev' : 'dist')));
 }
 
+// Workaround for incompatibility between Karma & gulp callbacks.
+// See https://github.com/karma-runner/gulp-karma/issues/18 for some related discussion.
+function newKarmaCallback(done) {
+  return function (exitCode) {
+    if (exitCode) {
+      done(new Error('Karma tests failed with exit code ' + exitCode));
+    } else {
+      done();
+    }
+  }
+}
+
 gulp.task('build-bundle-dev', ['devpack'], bundle.bind(null, true));
 gulp.task('build-bundle-prod', ['webpack'], bundle.bind(null, false));
 gulp.task('bundle', bundle.bind(null, false)); // used for just concatenating pre-built files with no build step
 
 gulp.task('devpack', ['clean'], function () {
-  webpackConfig.devtool = 'source-map';
+  var cloned = _.cloneDeep(webpackConfig);
+  cloned.devtool = 'source-map';
   var externalModules = helpers.getArgModules();
 
   const analyticsSources = helpers.getAnalyticsSources(analyticsDirectory);
   const moduleSources = helpers.getModulePaths(externalModules);
 
   return gulp.src([].concat(moduleSources, analyticsSources, 'src/prebid.js'))
     .pipe(helpers.nameModules(externalModules))
-    .pipe(webpack(webpackConfig))
+    .pipe(webpackStream(cloned, webpack))
     .pipe(replace('$prebid.version$', prebid.version))
     .pipe(gulp.dest('build/dev'))
     .pipe(connect.reload());
 });
 
 gulp.task('webpack', ['clean'], function () {
+  var cloned = _.cloneDeep(webpackConfig);
 
   // change output filename if argument --tag given
   if (argv.tag && argv.tag.length) {
-    webpackConfig.output.filename = 'prebid.' + argv.tag + '.js';
+    cloned.output.filename = 'prebid.' + argv.tag + '.js';
   }
 
-  webpackConfig.devtool = null;
+  delete cloned.devtool;
 
   var externalModules = helpers.getArgModules();
 
@@ -121,7 +135,7 @@ gulp.task('webpack', ['clean'], function () {
 
   return gulp.src([].concat(moduleSources, analyticsSources, 'src/prebid.js'))
     .pipe(helpers.nameModules(externalModules))
-    .pipe(webpack(webpackConfig))
+    .pipe(webpackStream(cloned, webpack))
     .pipe(replace('$prebid.version$', prebid.version))
     .pipe(uglify())
     .pipe(gulpif(file => file.basename === 'prebid.js', header(banner, { prebid: prebid })))
@@ -130,80 +144,50 @@ gulp.task('webpack', ['clean'], function () {
     .pipe(connect.reload());
 });
 
-// Karma Continuous Testing
-// Pass your browsers by using --browsers=chrome,firefox,ie9
-// Run CI by passing --watch
-gulp.task('test', ['clean'], function () {
-  var defaultBrowsers = CI_MODE ? ['PhantomJS'] : ['Chrome'];
-  var browserArgs = helpers.parseBrowserArgs(argv).map(helpers.toCapitalCase);
-
-  if (process.env.TRAVIS) {
-    browserArgs = ['Chrome_travis_ci'];
+// Run the unit tests.
+//
+// By default, this runs in headless chrome.
+//
+// If --watch is given, the task will re-run unit tests whenever the source code changes
+// If --browserstack is given, it will run the full suite of currently supported browsers.
+// If --browsers is given, browsers can be chosen explicitly. e.g. --browsers=chrome,firefox,ie9
+gulp.task('test', ['clean'], function (done) {
+  var karmaConf = karmaConfMaker(false, argv.browserstack, argv.watch);
+
+  var browserOverride = helpers.parseBrowserArgs(argv).map(helpers.toCapitalCase);
+  if (browserOverride.length > 0) {
+    karmaConf.browsers = browserOverride;
   }
 
-  if (argv.browserstack) {
-    browserArgs = [
-      'bs_ie_13_windows_10',
-      'bs_ie_11_windows_10',
-      'bs_firefox_46_windows_10',
-      'bs_chrome_51_windows_10',
-      'bs_ie_11_windows_8.1',
-      'bs_firefox_46_windows_8.1',
-      'bs_chrome_51_windows_8.1',
-      'bs_ie_10_windows_8',
-      'bs_firefox_46_windows_8',
-      'bs_chrome_51_windows_8',
-      'bs_ie_11_windows_7',
-      'bs_ie_10_windows_7',
-      'bs_ie_9_windows_7',
-      'bs_firefox_46_windows_7',
-      'bs_chrome_51_windows_7',
-      'bs_safari_9.1_mac_elcapitan',
-      'bs_firefox_46_mac_elcapitan',
-      'bs_chrome_51_mac_elcapitan',
-      'bs_safari_8_mac_yosemite',
-      'bs_firefox_46_mac_yosemite',
-      'bs_chrome_51_mac_yosemite',
-      'bs_safari_7.1_mac_mavericks',
-      'bs_firefox_46_mac_mavericks',
-      'bs_chrome_49_mac_mavericks',
-      'bs_ios_7',
-      'bs_ios_8',
-      'bs_ios_9',
-    ];
-  }
+  new KarmaServer(karmaConf, newKarmaCallback(done)).start();
+});
 
-  return gulp.src('lookAtKarmaConfJS')
-    .pipe(karma({
-      browsers: (browserArgs.length > 0) ? browserArgs : defaultBrowsers,
-      configFile: 'karma.conf.js',
-      action: (argv.watch) ? 'watch' : 'run'
-    }));
+gulp.task('test-coverage', ['clean'], function(done) {
+  new KarmaServer(karmaConfMaker(true, false), newKarmaCallback(done)).start();
 });
 
-// Small task to load coverage reports in the browser
-gulp.task('coverage', function (done) {
+// View the code coverage report in the browser.
+gulp.task('view-coverage', function (done) {
   var coveragePort = 1999;
 
   connect.server({
-    port: 1999,
-    root: 'build/coverage',
+    port: coveragePort,
+    root: 'build/coverage/karma_html',
     livereload: false
   });
-  opens('http://localhost:' + coveragePort + '/coverage/');
+  opens('http://localhost:' + coveragePort);
   done();
 });
 
-gulp.task('coveralls', ['test'], function() { // 2nd arg is a dependency: 'test' must be finished
+gulp.task('coveralls', ['test-coverage'], function() { // 2nd arg is a dependency: 'test' must be finished
   // first send results of istanbul's test coverage to coveralls.io.
   return gulp.src('gulpfile.js', { read: false }) // You have to give it a file, but you don't
   // have to read it.
-    .pipe(shell('cat build/coverage/lcov/lcov.info | node_modules/coveralls/bin/coveralls.js'));
+    .pipe(shell('cat build/coverage/lcov.info | node_modules/coveralls/bin/coveralls.js'));
 });
 
 // Watch Task with Live Reload
 gulp.task('watch', function () {
-
   gulp.watch([
     'src/**/*.js',
     'modules/**/*.js',
@@ -285,7 +269,6 @@ gulp.task('e2etest-report', function() {
   setTimeout(function() {
     opens('http://localhost:' + reportPort + '/' + targetDestinationDir.slice(2) + '/results.html');
   }, 5000);
-
 });
 
 gulp.task('build-postbid', function() {