Webpack Module Management

• Can compile just about any file/JS type
• Ability to write custom loaders
• Why YES you can use ES6, NPM, Bower, coffe...

// WOW, ES6!
export default class Person {
    constructor(name) {
	this.name = name;
    }

    getName() {
	let name = this.name;
	console.log(name);
    }
}

import Person from 'person';

var joel = new Person('Joel');
joel.sayName() // Prints: 'My Name is Joel'

var webpackConfig = {
  resolve: {
    modulesDirectories: ['node_modules', 'bower_components', 'yourJsFile']
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'es6-loader'
    }]
  }
};

Karma test-runner

• Can use preprocessors for compiling before tests
• Awesome CI via file watch
• Really just a http/websocket server, easy to test external browsers (virtual, emulated, whatevs).

// Build the codez before you runs it!
var karmaConfig = {
  preprocessors: {
    '**/*.js': ['webpack']
  },

  // SauceLabs Browsers!
  customLaunchers: {
    ie6: {
      base: 'SauceLabs',
      browserName: 'internet explorer',
      platform: 'Windows XP',
      version: '6'
    },
    android4: {
      base: 'SauceLabs',
      browserName: 'android',
      platform: 'linux',
      version: "4.0"
    },
  },

  // Test framworks
  frameworks: ['mocha', 'chai'],


  // list of files / patterns to load in the browser
  files: [
    "*.spec.js"
  ],
}

Gulp for task running

• Tasks are functions
• A lot less object literals
• Doesn't need to be a gulp plugin to work
• Streams are fast, and drinkable.
• It's just JavaScript!

// Compile dat JS, push to LiveReload
gulp.task('scripts', ['clean'], function() {
  return gulp.src(['index.js'])
    .pipe(changed())
    .pipe(webpack(webPackConfig))
    .pipe(gulp.dest('dev/js'))
    .pipe(connect.reload())
    .pipe(uglify())
    .pipe(gulp.dest('build/js'));
});

// CI Testing Task
gulp.task('test', function() {
  return gulp.src(karmaConfig)
    .pipe(karma({
      browsers: ['Chrome', 'Firefox', 'ie6', 'android4'],
      configFile: 'karma.conf.js',
      action: 'watch'
    }));
});

// Watch file changes
gulp.task('watch', function() {
  gulp.watch(['**/*.js'], ['scripts']);
});